În acest articol voi aborda aspectele esențiale ale extinderii funcționalității CSS în dezvoltarea front-end: ce este un preprocesor CSS și modul în care se utilizează, o analiză a preprocesatoarelor CSS disponibile și o comparație între primele două cele mai populare preprocesatoare, SASS și 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 (tags) acestui limbaj.
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. 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. 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 CSS; toate aceste fișiere vor fi îmbinate într-un singur fișier CSS odată cu realizarea preprocesării.
- Definirea de mixin-uri - funcții asemănătoare 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 valorilor, conform unitățile de măsură 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. Î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. De-a lungul timpului însă, ambele preprocesatoare CSS au fost portate și pe alte limbaje de programare, precum Java, C/C++, PHP ș.a., astfel că acestea sunt disponibile pe multiple medii 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.
Concluzii
Folosirea unui preprocesator CSS 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:
Citește și:
Ce este web 3.0
Cum configurezi zona DNS a unui site-ului