Caracteristica #1: Variabile
Diverse clase CSS pot conține aceeași regulă sau reguli într-un proiect. De exemplu, avem 20 de căsuțe pe pagina noastră web cu diferite culori de fundal:
.box-1 {
width: 100px;
height: 100px;
background: red;
}.box-2 {
width: 100px;
height: 100px;
background: yellow;
}....box-20 {
width: 100px;
height: 100px;
background: blue;
}
Mai târziu, clientul nostru se răzgândește și dorește căsuțe mai mari. Așadar, trebuie să măresc proprietățile width și height ale fiecărei clase, una câte una. Acest lucru ar putea fi, de asemenea, 50 de clase. În programarea din viața reală, acest lucru poate fi frustrant. Așa cum am menționat mai sus, acesta este un exemplu de efort mare pentru schimbări mici.
Cum putem face acest lucru mai eficient?
Sass oferă o soluție: variabilele. Ca și în alte limbaje de programare, putem folosi variabile pentru a stoca valori și a le refolosi ulterior.
Definirea unei variabile:
$variable-name: value;
Răspunzând la exemplul de mai sus, dacă definim variabile pentru width & height :
$box-width: 100px;
$box-height: 100px;
mai târziu, când este nevoie de o modificare, tot ce trebuie să facem este să le schimbăm valorile o singură dată:
$box-width: 200px; // changed from 100px to 200px
$box-height: 200px; // that's all!.box-1 {
width: $box-width; // using variables now instead of pixels
height: $box-height;
background: red;
}.box-2 {
width: $box-width;
height: $box-height;
background: yellow;
}....box-20 {
width: $box-width;
height: $box-height;
background: blue;
}
CSS însuși suportă acum și variabilele, dar nu funcționează în IE & versiunile vechi ale altor browsere:
Caracteristica #2: Nesting
CSS-ul standard nu suportă nesting. Nu putem scrie o clasă în interiorul altei clase. Pe măsură ce proiectul devine mai mare, acest lucru aduce o problemă de lizibilitate și structura nu arată bine.
De exemplu, să definim un meniu de navigare cu linkuri care pot fi accesate în HTML mai jos:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
HTML suportă codul imbricate. Cu toate acestea, fără anidare, ele arată așa în CSS:
Am fost nevoiți să scriem nav pentru fiecare tag, chiar și pentru pseudo-clasa de ancoră (hover), deoarece nav este tagul părinte al tuturor. Sass însă, suportă cuibăritul:
Aici putem scrie un cod mai bine structurat ca în HTML. Nu trebuie să scriem nav clasă după clasă, ceea ce previne, de asemenea, redundanța
Important: Nu este recomandat să cuibărim clasele la o adâncime mai mare de 3 nivele.
Caracteristica #3: Mixins
Am învățat mai sus cum să folosim variabile pentru regulile CSS. Dar ce se întâmplă dacă avem nevoie să folosim un grup de reguli împreună? Sass are o caracteristică numită mixins, care ne permite să facem acest lucru.
Ce este un Mixin?
Mixins sunt funcții Sass care grupează declarații CSS împreună. Le putem reutiliza mai târziu ca și variabilele.
Potem crea un mixin cu comanda @ mixin, urmată de un nume:
@mixin my-font {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
}
sau putem crea un mixin ca o funcție și să adăugăm și parametri:
$font-color: red;@mixin my-font($font-color) {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
color: $font-color;
}
După ce am creat mixinul, îl putem folosi în orice clasă cu comanda @ include. Astfel, putem folosi mixin-ul my-font în loc de 4 linii de reguli de font de fiecare dată. Această abordare simplifică codul.
p {
@include my-font;
}
Utilizarea mixin-urilor este o modalitate bună de a preveni redundanța codului.
Caracteristica #4: Importuri
În cele din urmă, putem tăia fișierele noastre CSS uriașe în bucăți mai mici cu caracteristica de import Sass. Este mult mai ușor să citim & să menținem fișiere mai mici decât un singur fișier mare cu linii nesfârșite.
De fapt, și CSS are acum o funcție de import. Dar funcționează diferit. CSS trimite o cerere HTTP către server de fiecare dată pentru a importa un fișier. Sass o face fără o cerere HTTP, ceea ce este o abordare mai rapidă.
Tot ce trebuie să faceți este să importați fișierul Sass cu comanda @ import într-un alt fișier Sass:
// Your main Sass file@import 'file';
@import 'anotherFile';.class {
// Your code
}
Nu trebuie să folosim extensiile .scss în calea fișierului, Sass o va înțelege.