BACK
Scris de Marius Chiriac

Utilizarea de variabile CSS in stilizarea website-urilor

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.

Mai multe articole

INOVEO a scris

INOVEO semneaza proiectul de rebranding pentru GURSK

Companie de distributie de implanturi si solutii complete pentru medicii stomatologi. Bucuresti, iunie 2025 – INOVEO, agentie de branding cu 25 de ani de experienta, a semnat proiectul de rebranding pentru GURSK, prima companie care [...]

Read More... from Utilizarea de variabile CSS in stilizarea website-urilor

Citeste tot articolul

INOVEO a scris

Ce ramane viu intr-o lume care invata sa mimeze viata?

Acest articol pleaca de la ideile care s-au conturat in timpul si imediat dupa recentele discutii de la IQ Digital, editia proaspat incheiata, desfasurata intr-un loc cu totul special: Cazinoul din Constanta – o bijuterie [...]

Read More... from Utilizarea de variabile CSS in stilizarea website-urilor

Citeste tot articolul

INOVEO a scris

Logo-ul nu conteaza

… chiar atat de mult cat crezi Spune pe bune, ai alocat ore intregi sau zile sau poate chiar saptamani in dezvoltarea unui logo pentru compania ta sau brandul tau? Cu siguranta ca da. Gandeste-te [...]

Read More... from Utilizarea de variabile CSS in stilizarea website-urilor

Citeste tot articolul

INOVEO a scris

Cat costa luxul

Pretul nu e o simpla eticheta. E o declaratie. Si, cel mai important, e parte integranta din procesul de constructie a brandului. Brandurile de lux nu vand produse. Vand statut, aspiratie, apartenenta la un cerc [...]

Read More... from Utilizarea de variabile CSS in stilizarea website-urilor

Citeste tot articolul