Una din functionalitatile CSS dorite de toti programatorii web era declararea de variabile, cunoscute acum si sub numele de proprietati personalizate. Inainte de introducerea lor nativa in CSS acum cativa ani, era necesara folosirea de extensii precum SASS, care adaugau functionalitati puternice, dar necesita compilare pentru a putea fi citit codul de catre un browser. De exemplu, codul CSS din website-ul INOVEO este creat folosind SASS, mai exact sintaxa SCSS (Sassy CSS). Variabilele CSS permit crearea de site-uri mai complexe si dinamice cu un cod mai usor de inteles.

Traditional cand scriem cod CSS adaugam la proprieti valorile ce dorim sa fie folosite. De exemplu, pentru o clasa ce face textul rosu, putem folosi codul:

.clasa { color: red; }

Pe masura ce se scrie din ce in ce mai mult cod, valorile se vor repeta in diverse clase si ID-uri. Modificarea lor poate deveni problematica cand sunt prea multe. CSS-ul din website-ul INOVEO are cateva mii de linii de cod si fara variabilele din SASS ar fi fost foarte dificil de modificat, in special cand lucreaza mai multe persoane la el.

Sintaxa pentru variabile este urmatoarea („valoare” este optional si reprezinta fallback-ul in caz ca variabila nu este declarata):

var(––nume, valoare)

Declararea unei variabile se face prin utilizarea „––” (dubla cratima) inaintea numelui, de exemplu:

––culoarePrimara: red

Ele se pot folosi global in :root sau local, direct in interiorul proprietatii (se pot rescrie valorile globale si se folosesc doar in acea proprietate). Astfel codul traditional de mai sus devine:

1. pentru declarare globala:

:root { ––culoarePrimara: red; }
.clasa { color: var(––culoarePrimara); }

2. pentru declarare locala:

.clasa {
––culoarePrimara: red;
color: var(––culoarePrimara);
}

Dupa cum se observa, daca vrei culoarea respectiva sa fie modificata trebuie doar schimbata variabila. Un alt avantaj mare este faptul ca variabilele se pot modifica prin Javascript fara sa fie nevoie ca toate elementele ce vrei sa fie afectate sa fie citite, fiind indeajuns doar variabila sa fie modificata. Un exemplu de cod JS pentru modificarea valorii variabilei noastre din rosu in albastru din root ar fi:

document.documentElement.style.setProperty(––culoarePrimara’, ‘blue’);

Cu support foarte bun in browserele moderne si cu o implementare robusta deja de cativa ani, variabilele CSS trebuie sa fie invatate de catre orice programator web. Nu ezita sa le folosesti pentru creearea de website-uri mai frumoase si mai dinamice.