Îmbrățișarea Sass: de ce ar trebui să nu mai folosiți Vanilla CSS

Când am auzit pentru prima oară despre Sass și alți preprocesoare CSS, gândurile mele exacte nu au fost tocmai entuziaste. „De ce avem nevoie de un alt instrument pentru ceva care funcționează deja la fel de frumos ca CSS?”. „Nu voi folosi asta”. „CSS-ul meu este suficient de ordonat pentru a nu avea nevoie de el”. „Un preprocesor este pentru cei care nu știu să scrie CSS, dacă știi să scrie CSS nu vei avea nevoie de un preprocesor”. „La urma urmei, procesoarele sunt pentru oameni care nu știu să scrie CSS. Dacă ar face-o, nu ar avea nevoie de un preprocesor”. Și chiar le-am evitat o vreme, până când am fost nevoită să-l folosesc în mai multe proiecte.

Nu mi-am dat seama cât de mult îmi plăcea să lucrez cu Sass până de curând, când a trebuit să trec înapoi la vanilla CSS într-un proiect. În acel timp, am învățat atât de multe încât am decis să-l laud pe Sass și să fac din aceasta o lume mai bună și să te fac o persoană mai fericită!

De ce să folosiți Sass oricum?

Organizație: @import

Acest proiect pe care tocmai l-am menționat, un site mare de comerț electronic, avea un singur fișier CSS cu 7184 de linii de declarații de stil necomprimate. Da, ați citit bine: șapte mii o sută optzeci și patru de rânduri de CSS. Sunt sigur că acesta nu este cel mai mare fișier CSS pe care dezvoltatorii front-end au trebuit să se ocupe din industrie, dar a fost suficient de mare pentru a fi o mizerie completă.

Acesta este primul motiv pentru care aveți nevoie de Sass: vă ajută să vă organizați și să vă modulizați foile de stil. Nu este variabilă, nu este cuibărit. Pentru mine, caracteristica cheie a Sass sunt parțiale și modul în care extinde regula CSS @import pentru a-i permite să importe fișiere SCSS și Sass. În practică, aceasta înseamnă că veți putea împărți fișierul uriaș style.css în câteva fișiere mai mici, care vor fi mai ușor de întreținut, înțeles și organizat.

Regula @import există aproape la fel de mult ca CSS în sine. Cu toate acestea, a câștigat faimă proastă, deoarece atunci când utilizați @import în fișierele dvs. CSS, declanșați solicitări HTTP separate, câte una pentru fiecare fișier CSS pe care îl importați. Acest lucru poate fi în detrimentul performanței site-ului dvs. Deci, ce se întâmplă când îl folosești cu Sass? Dacă nu te-ai oprit niciodată să te gândești la ce înseamnă cuvântul „preprocesor”, acum este momentul.

Un preprocesor este un program care prelucrează datele sale de intrare pentru a produce ieșiri care sunt utilizate ca intrare într-un alt program. — Wikipedia

Deci, revenind la regula noastră @import, aceasta înseamnă că @import va fi gestionat de Sass și toate fișierele noastre CSS și SCSS vor fi compilate într-un singur fișier care va ajunge pe site-ul nostru live. Utilizatorul va trebui să facă o singură cerere și va descărca un singur fișier, în timp ce structura proiectului dumneavoastră poate fi compusă din sute de fișiere modulare. Iată cum poate arăta stilul.scss al unui proiect tipic Sass:

 @import “variables”; @import “reset”; @import “fonts”; @import “base”; @import “buttons”; @import “layout”;

Nu te repeta: variabile

Orice articol care îl laudă pe Sass va începe probabil prin a menționa caracteristica sa vedetă - variabile. Cea mai comună utilizare a variabilelor este o paletă de culori. De câte ori ați găsit mai multe declarații a ceea ce se presupune a fi aceeași culoare, ajungând în CSS ca nuanțe ușor diferite, deoarece nimeni nu folosește același cod hexadecimal? Sass la salvare. În Sass, puteți declara variabile cu aproape orice valoare. Deci, paleta noastră de culori poate fi ceva de genul:

 $brand: #226666; $secondary: #403075; $emphasis: #AA8439;

Cuvintele care încep cu „$” sunt variabile Sass. Ceea ce înseamnă este că mai târziu în foile de stil, veți putea folosi acele cuvinte și vor fi mapate la valorile pe care le-ați definit anterior:

 body { background: $secondary; } .logo { color: $brand; } a { color: $emphasis; } a:hover { color: $brand; }

Imaginați-vă cum acest lucru ar putea schimba cele 7184 de linii de cod CSS ale noastre și este posibil să începeți să doriți Sass chiar acum. Și mai bine, imaginați-vă că există o reproiectare a mărcii și că trebuie să actualizați toate culorile din CSS. Cu Sass, singurul lucru pe care trebuie să-l faceți este să actualizați declarațiile acelor variabile o dată, și baam! Modificările vor fi în jurul foilor de stil.

Am codificat acest exemplu în Sassmeister, un loc de joacă Sass. Deci, mergeți mai departe și încercați să schimbați acele variabile cu altceva.

Utilitatea variabilelor nu se limitează doar la culori, ci la declarații de font, dimensiuni, interogări media și multe altele. Acesta este un exemplu de bază pentru a vă face o idee, dar credeți-mă, posibilitățile cu Sass sunt nesfârșite.

Cod sursă mai curat: Imbricare

Cuibarea ar putea fi a doua cea mai menționată caracteristică a Sass. Când m-am întors la vanilla CSS după ce am folosit Sass, fișierul CSS la care mă uitam părea atât de aglomerat încât nu eram sigur dacă a fost minificat. Fără imbricare, vanilla CSS nu arată mai bine decât fișierele .min.css destul de imprimate:

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; } .header.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .header .nav { list-style: none; } .header .nav li { display: inline-block; } .header .nav li a { display: block; padding: 0.5em; color: #AA8439; }

Cu Imbricare, puteți adăuga clase între acoladele unei declarații. Sass va compila și gestiona selectoarele destul de intuitiv. Puteți chiar să utilizați caracterul „&” pentru a obține o referință a selectorului părinte. Revenind la exemplul nostru CSS, îl putem transforma în:

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; &.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .nav { list-style: none; li { display: inline-block; a { display: block; padding: 0.5em; color: #AA8439; } } } }

Arata frumos si este mai usor de citit. Simțiți-vă liber să vă jucați cu acest exemplu.

Din nou! Nu te repeta: Mixins și Extends

Repetarea în CSS este întotdeauna greu de evitat. Și nu strica să te stresezi un pic mai mult pe asta, mai ales când Sass îți oferă mix-uri și extinde. Ambele sunt caracteristici puternice și ajută la evitarea multor repetări. Posibilitățile cu mixuri și extinde nu par să aibă un sfârșit. Cu mixin-uri, puteți face declarații CSS parametrizate și le puteți reutiliza în foile de stil.

De exemplu, să presupunem că aveți un modul cutie cu un buton în interior. Doriți ca chenarul casetei și fundalul butonului să fie de aceeași culoare. Cu vanilla CSS, faci ceva de genul:

 .box { border: 2px solid red; } .box .button { background: red; }

Să presupunem că acum doriți același modul cutie, dar cu o culoare diferită. Veți adăuga ceva de genul acesta la CSS-ul dvs.:

 .box-alt { border: 2px solid blue; } .box-alt .button { background: blue; }

Acum, să presupunem că doriți un modul cutie, dar cu margine mai subțire. Ai adauga:

 .box-slim { border: 1px solid red; } .box-slim .button { background: red; }

Multă repetare, nu? Cu Sass puteți abstrage aceste cazuri pentru a reduce repetarea. Ai putea defini un mixin ca acesta:

 @mixin box($borderSize, $color) { border: $borderSize solid $color; .button { background: $color; } }

Și astfel, codul sursă poate fi redus la:

 .box { @include box(2px, red); } .box-alt { @include box(2px, blue); } .box-slim { @include box(1px, red); }

Arată frumos, nu? Joacă-te cu acest exemplu. Vă puteți crea propria bibliotecă de mix-uri sau chiar mai bine puteți utiliza una dintre bibliotecile comunitare de acolo.

Extinderile sunt similare, vă permit să partajați proprietăți de la un selector la altul. Cu toate acestea, în loc să scoată mai multe declarații, acestea scot o listă de clase fără a vă repeta proprietățile. În acest fel, puteți evita repetarea codului și în rezultatul dvs. Să uităm de butoanele din exemplul nostru anterior și să vedem cum ar funcționa @extend cu .boxes .

Să presupunem că declari o primă casetă:

 .box { margin: 1em; padding: 1em; border: 2px solid red; }

Acum vrei două cutii asemănătoare cu aceasta, dar cu culori diferite de chenar. Puteți face ceva de genul:

 .box-blue { @extend .box; border-color: blue; } .box-red { @extend .box; border-color: red; }

Iată cum ar arăta CSS-ul compilat:

 .box, .box-blue, .box-red { margin: 1em; padding: 1em; border: 2px solid red; } .box-blue { border-color: blue; } .box-red { border-color: red; }

Puternic, nu? Puteți găsi exemplul aici. Dacă examinați CSS-ul rezultat, vă veți da seama că clasa .box este inclusă în rezultat. Dacă nu doriți acest comportament, puteți combina @extend cu „substituenți”. Un substituent este un selector special care nu va scoate o clasă în CSS. De exemplu, uneori mă trezesc că resetez foarte mult stilurile implicite ale listelor. În general, folosesc @extend cu un substituent ca acesta:

 %unstyled-list { list-style: none; margin: 0; padding: 0; }

Apoi puteți reutiliza acest model în toate foile de stil:

 .search-results { @extend %unstyled-list; } .posts { @extend %unstyled-list; } .nav { @extend %unstyled-list; }

CSS-ul dvs. compilat va arăta astfel:

 .search-results, .posts, .nav { list-style: none; margin: 0; padding: 0; }

Consultați exemplele aici.

Există mai mult?

Absolut! Nu am vrut să complic prea mult acest articol, dar există o lume Sassy care așteaptă să fie descoperită de tine; și există și o mulțime de funcții dincolo de acestea: operații, comentarii pe o singură linie cu //, funcții, bucle if... dacă te-ai gândit vreodată „ar fi grozav să faci ceva „X” cu CSS”, sunt sigur că acel lucru „X” este deja făcut de Sass. „CSS cu superputeri” este sloganul său și asta nu poate fi mai aproape de adevăr.

Concluzie

Du-te și vizitează pagina de instalare și începe hacking! Crede-mă, nu vei regreta.

Da, există câteva alternative la Sass. Alte preprocesoare (LESS, Stylus), postprocesoare, Grunt etc. Există chiar și variabile CSS. Nu spun că Sass este singura tehnologie de acolo. Tot ce spun este că este cel mai bun! Cel putin pentru moment. Nu crezi în ceea ce spun? Continuați și încercați singur. Nu vei regreta!