Preprocesatoarele CSS devin din ce în ce mai mult un pilon în fluxul de lucru al dezvoltatorilor web front-end. CSS este un limbaj incredibil de complicat și nuanțat și, într-un efort de a ușura utilizarea acestuia, dezvoltatorii apelează adesea la utilizarea preprocesoarelor precum SASS sau LESS.

Preprocesoarele CSS compilează codul care este scris folosind un compilator special. Apoi îl folosesc pentru a crea un fișier CSS, care poate fi apoi menționat de documentul HTML principal.

Atunci când utilizați orice preprocesor CSS, veți putea programa în CSS normal la fel ca în cazul în care preprocesorul nu ar fi fost la locul său. Lucrul bun este că aveți la dispoziție și mai multe opțiuni. Unele, cum ar fi SASS, au standarde de stil specifice care sunt menite să facă scrierea documentului și mai ușoară, cum ar fi libertatea de a omite acolade dacă doriți.

Desigur, preprocesoarele CSS oferă și alte caracteristici. Multe dintre caracteristicile oferite sunt incredibil de asemănătoare între preprocesoare, cu doar mici variații de sintaxă. Astfel, puteți alege cam oricine doriți și veți putea realiza aceleași lucruri. Unele dintre caracteristicile mai utile sunt:

Variabile

Citește mai multCum se face o promisiune dintr-o funcție de apel invers în JavaScript

Unul dintre elementele cele mai frecvent utilizate în orice limbaj de programare este variabila, lucru care îi lipsește în mod special CSS. Având la dispoziție variabile, puteți defini o valoare o singură dată și le puteți refolosi în întregul program. Un exemplu în SASS ar fi:

$yourcolor: #000056
.yourDiv {
  color: $yourcolor;
 }

Prin declararea SASS yourcolor variabilă o dată, acum este posibilă reutilizarea aceleiași culori exacte în întregul document fără a mai fi nevoie să retipezi definiția.

Bucle

Un alt element obișnuit în limbi sunt buclele, altceva lipsește CSS. Buclele pot fi folosite pentru a repeta aceleași instrucțiuni de mai multe ori fără a fi necesară reintroducerea de mai multe ori. Un exemplu cu SASS ar fi:

@for $vfoo 35px to 85px {
  .margin-#{vfoo} {
    margin: $vfoo 10px;
   }
 }

Această buclă ne scutește de a avea același cod de mai multe ori pentru a modifica dimensiunea marginii.

Declarații If / Else

O altă caracteristică care nu are CSS sunt declarațiile If / Else. Acestea vor rula un set de instrucțiuni numai dacă o condiție dată este adevărată. Un exemplu în SASS ar fi:

@if width(body) > 500px {
  background color: blue;
 } else {
  background color: white;
 }
Citește mai multCum se generează un fișier de reducere GitHub din Microsoft Word utilizând TypeScript

Aici, culoarea de fundal își va schimba culoarea în funcție de lățimea corpului paginii.

Acestea sunt doar câteva dintre funcțiile majore ale preprocesoarelor CSS. După cum puteți vedea, preprocesatoarele CSS sunt instrumente incredibil de utile și versatile. Mulți dezvoltatori web le folosesc și este foarte recomandat să învățați cel puțin unul dintre ele.

Mai multe informatii: