Ce este preprocesatorul CSS și ce să alegi, SASS sau LESS

Preprocesatorul CSS devine o unealtă extrem de utilă, chiar necesară în cazul dezvoltării site-urilor foarte mari. Rolul acestuia este de a extinde caracteristicile și dinamicitatea CSS-ului în timpul procesului de implementare a designului web astfel încât acest proces să devină mai facil de realizat, dar și de actualizat sau extins ulterior.

Cum funcționează un preprocesator CSS - convertire cod SASS la CSS

În acest articol am să tratez punctele esențiale în ceea ce privește extinderea funcționalității CSS-ului în dezvoltarea web front-end: ce este un preprocesator (pre-processor) CSS și cum se folosește, care sunt preprocesatoarele CSS disponibile și, dintre primele două cele mai populare preprocesatoare, pe care să-l alegi (SASS vs LESS).

Scurtă introducere – ce este CSS


HTML (HiperText markup Language) este limbajul de marcare folosit pentru crearea paginilor web; mai exact, HTML este folosit pentru a defini conținutul unei pagini web, prin intermediul etichetelor proprii limbajului (tags).

CSS-ul (Cascading Style Sheets) este un limbaj de stilizare aplicabil elementelor HTML, prin care se poate defini în detaliu modul în care elementele HTML vor fi afișate în browser. Fără o stilizare a paginilor web, acestea ar avea un aspect vizual neplăcut și dificil de parcurs de către utilizator, comparativ cu site-urile web moderne. Drept urmare, toate site-urile web sunt stilizate prin intermediul foilor de stil în cascadă (CSS), iar orice browser oferă suport atât pentru limbajul HTML, cât și pentru CSS.

CSS-ul a avut de-a lungul timpului mai multe actualizări, ce mai recentă versiune (CSS3) permițând crearea de elemente animate, transformări 2D și 3D, variate efecte ș.a. Drept urmare, se poate aștepta ca și pe viitor astfel de actualizări să continue, iar o astfel de îmbunătățire ar putea fi, de exemplu, capacitatea de a defini stiluri dinamice – prin care să se genereze stiluri în timpul încărcării paginii web.

Ce este un preprocesator CSS și cum se folosește


Preprocesatorul CSS este o unealtă destinată dezvoltatorilor/ programatorilor web prin care aceștia pot crea stilizări CSS într-un mod dinamic – folosind aspecte tipice limbajelor de programare. Acesta se axează pe un limbaj de scripting simplist, prin care caracteristicile CSS-ului sunt extinse, însă doar în cadrul procesului de web development.

Pentru ca stilizările care extind limbajul CSS să poată fi folosite în browser, acestea vor trebui mai întâi preprocesate, sau, altfel zis, compilate în codul CSS, compatibil cu navigatoarele web disponibile. Extensia implicită a fișierelor de preprocesat nu este .css, deși codul în sine este preponderent CSS, drept urmare nu se poate folosi direct de către browser stilizări care nu au fost compilate în CSS. Important: codul care nu a fost preprocesat și care extinde limbajul CSS nu este suportat de către browser.

Așadar, folosirea unui preprocesator CSS trebuie să se facă împreună cu un program care să realizeze preprocesarea codului. Astfel de programe există atât în versiuni gratuite, dar și contra cost, iar operația de compilare se poate face foarte simplu, fie folosind un program cu interfețe grafice care să realizeze această operație, fie din linie de comandă.

Prin intermediul unui preprocesaror CSS se extinde deci modul în care sunt create la nivelul dezvoltatorului stilizările CSS. Acesta nu va extinde caracteristicile CSS-ului în sine, ci va lărgi flexibilitatea prin care codul CSS este aplicat, ducând astfel la ușurarea programării în CSS și, deci, și la o mai bună scalabilitate a codului.

Ce poți face folosind un preprocesator CSS


Principalele elemente furnizate de către preprocesatorul CSS fac posibile următoarele operații:
  • Definirea de variabile care să poată fi folosite ulterior oriunde în codul CSS de preprocesat – eliminând astfel necesitatea de a reintroduce de mai multe ori un același set de valori pentru variate proprietăți CSS și, mai ales, de a actualiza aceste valori în multiple zone din cod.
  • Încapsularea codului CSS pentru selectori ierarhici – lucru care permite crearea facilă de stiluri cu comportamente diferite în variate contexte, într-o zona compactă, ramificată în funcție de context, ușor de urmărit.
  • Posibilitatea de a diviza codul în multiple fișiere – facilitând astfel structurarea logică a codului CSS și mai ales, separarea codului dinamic, unde se declară variabile și funcții, de codul static, codul CSS standard. Toate aceste fișiere vor fi îmbinate într-un singur fișier CSS odată cu realizarea preprocesării.
  • Definirea de mixin-uri - funcții asemenea celor din limbajele de programare PHP, JavaScript, Java, C/C++ ș.a. - care să genereze automat cod CSS în funcție de anumiți parametri transmiși la apelare.
  • Posibilitatea de a folosi toate proprietățile unei selector CSS prin operația de importare – nu va mai fi deci necesară redefinirea codului;
  • Posibilitatea de a executa operații matematice (+, -, *, /, %), atât aplicabile numerelor, conform unitățile de măsură care au fost folosite, cât și aplicabile culorilor.

Aplicarea acestor operații diferă de la un preprocesator CSS la altul, însă conceptele de bază sunt aceleași.

Ce preprocesator CSS să folosești: SASS vs LESS


Există mai multe preprocesatoare CSS disponibile, dintre acestea, SASS (Syntactically Awesome Style Sheets) și LESS (Leaner CSS) sunt cele mai populare, iar acest lucru nu este deloc întâmplător; în afară de aceste două, mai există și altele, de exemplu, Stylus, Switch CSS ș.a. De aici și întrebarea: ce preprocesator CSS să folosești?

Răspunsul pe scurt: folosește SASS.

Între SASS și LESS există diferențe minore, însă acestea devin din ce în ce mai favorabile SASS-ului, în detrimentul LESS-ului. Per ansamblu, ori că folosești SASS, ori că folosești LESS, ai la îndemână un preprocesator CSS performant, stabil și matur. Privind însă în detaliu diferențele dintre cele două, SASS-ul iese învingător.

În articolul SASS vs LESS (în engleză) de pe hongkiat.com, este făcută o comparație între cele două preprocesatoare, iar SASS iese învingător cu un punctaj de 5 la 3 contra LESS-ului.

SASS este dezvoltat în Ruby, în timp ce LESS este dezvoltat în JavaScript. În timp însă ambele preprocesatoare CSS au fost portate și pe alte limbaje de programare, de exemplu, Java, C/C++, PHP, JavaScript în cazul SASS-ului, ș.a., astfel că folosirea acestora se poate face de pe orice mediu de lucru.

Mai mult decât atât, există un număr mare de programe ce permit compilarea codului în CSS, lucru care elimină necesitatea de a instala Ruby pe calculator, în cazul SASS-ului, sau de a folosi librăria Javascript LESS, în cazul LESS-ului, simplificând astfel utilizarea preprocesorului.

Încă o dovadă că ar trebui să folosești SASS este și faptul că Bootstrap, cel mai popular framework CSS pentru dezvoltarea de website-uri și aplicații web responsive, folosește SASS începând cu noua versiune de Bootstrap, versiunea 4.

Concluzie


Folosirea unui preprocesator CSS ar trebui să fie o necesitate ori de câte ori trebuie ai de a face cu CSS, chiar dacă este vorba de website-uri mici sau medii. Folosirea acestuia te va ajuta să implementezi stilizările mai rapid, cu un grad minimal de reutilizare a codului și, mai ales, într-un mod compact, care să permită actualizarea rapidă, respectiv extinderea facilă a stilizărilor site-ului.

SASS și LESS sunt cele mai populare preprocesatoare CSS, ambele furnizând un același set de funcționalități de extindere a CSS-ului. Drept urmare, poți folosi oricare preprocesator dorești dintre cele două - nu există un cel mai bun preprocesator CSS -, însă, cum SASS este mult mai popular decât LESS și acesta furnizează și anumite caracteristici adiționale LESS-ului, ar trebui să consideri SASS drept preprocesatorul CSS ideal.

Pentru codul SASS din imaginea expusă în introducere se va obține, după efectuarea preprocesării cu SASS, următorul cod CSS:

Cod CSS după preprocesarea SASS

Citește și:
Ce este web 3.0
Cum configurezi zona DNS a unui site-ului
Postări similare
- Anunț sponsorizat -