Dacă citești asta înseamnă, probabil esti familiarizat cu CSS și au auzit de SCSS sau Sass, dar nu au luat inca se arunca cu capul.,
ei Bine, o veste bună. Sass îți va face viața mult mai bună. În cele din urmă veți putea să vă uscați (nu vă repetați) codul în CSS.
practic, CSS lipsește unele caracteristici de mare, care ar ajuta transforma într-o mai ușor de utilizat și de citit. Sass adaugă variabile, cuiburi, parțiale, Mixins, extinde/moștenire, și operatori. Unele dintre acestea sunt lucruri pe care limbajele de programare tind să le aibă., Dacă nu știți care sunt unele dintre ele, este în regulă. Vom defini fiecare dintre acestea și vă vom arăta cum pot fi utilizate.un Sass poate fi compilat într-un fișiere CSS făcându-l scris mai multe fișiere ușor.
dacă utilizați aplicația create react, aveți noroc, deoarece partea de procesare este deja îngrijită pentru dvs. Dacă nu puteți utiliza Grunt sau Gulp pentru a procesa fișierele Sass/SCSS în CSS. Dacă nu sunteți încă într-un mediu care va face acest lucru, vă sugerez să configurați mai întâi acest lucru. Acest articol este de a vorbi despre caracteristicile Sass și cum să le folosească.,
care este diferența dintre Sass și SCSS. Ei bine, ambele pot fi compilate în CSS. Diferența reală este în sintaxă. SCSS utilizează cea mai mare parte aceeași sintaxă a CSS în timp ce Sass ia acolade buclat și semi-colons. În ambele puteți utiliza caracteristicile suplimentare pe care le oferă Sass.
următoarele arată diferențele sintactice.
dacă utilizați orice limbaj de codificare știți ce este o variabilă. Așa că nu voi merge prea în profunzime cu asta. În esență, Sass vă permite în sfârșit să definiți variabile, astfel încât, dacă decideți să schimbați, spuneți o culoare, nu trebuie să o schimbați de 1000 de ori., Puteți schimba doar variabila de culoare primară într-un singur loc și sunteți bine să mergeți
$primary-color: #333; body {
background-color: $primary-color;
}.text {
color: $primary-color;
}
cuiburi
în CSS nu puteți cuibări. Să aruncăm o privire la acești doi selectori. Nu este nimic teribil în neregulă cu asta. Dar repetăm codul.
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
putem cuib în Sass așa. Pare mult mai curat.
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
}
Partials
Partials sunt fișiere Sass sau Scss care au o subliniere în partea din față a numelui fișierului. De exemplu. „_test.SCS”. Ce face asta?, Aceasta denotă că acest fișier special, nu ar trebui să fie transformat în CSS atunci când vine momentul. Aceste fișiere vor conține fragmente de CSS care pot fi apoi importate de alte fișiere SCSS.aceasta este o modalitate foarte bună de a modulariza CSS și să păstreze lucrurile mai ușor de întreținut. De exemplu, poate doriți să stocați variabile care vor fi utilizate în mai multe fișiere. Acesta este modul de a face acest lucru.Mixins sunt interesante deoarece adaugă o caracteristică asemănătoare limbajului de codare. Veți recunoaște imediat ce vreau să spun când vedeți codul:
în loc să tastați „rotiți(30deg)” de 3 ori., Puteți crea ceea ce, în esență, se simte ca o funcție și un fel de acte ca unul. Treci în proprietatea transformării () mixin.
pentru a utiliza această bucată de cod, trebuie să utilizați cuvântul cheie „@ include”.mai multe informații dacă faceți clic aici.
extinde/moștenire& operatori
voi vorbi despre acestea în partea 2, deoarece acestea sunt un pic mai implicate. Acestea sunt unele dintre cele mai utile caracteristici din SCSS, așa că vă rugăm să urmați și voi posta acest blog săptămâna viitoare!vă rugăm să urmați-mă pe Twitter @thedrewprint și să mă găsiți pe LinkedIn la Andrew Richards., Vă mulțumim pentru lectură!