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

Avantajele si dezavantajele unui website de tipul One Page

Site-urile sunt o esentiale pentru orice afacere sau proiect personal. Site-urile de tipul “one page” (o pagina), au devenit foarte populara in ultimii ani. Dar care sunt avantajele si dezavantajele unui astfel de site? Sa [...]

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

Citeste tot articolul

INOVEO a scris

De ce culorile alese arata diferit in print fata de online

Culorile joaca un rol crucial in definirea identitatii vizuale a unui brand. De la celebrul rosu al Coca-Cola la albastrul vibrant al Facebook, culorile au puterea de a evoca emotii, de a crea recunoastere a [...]

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

Citeste tot articolul

INOVEO a scris

Optimizarea portofoliului de branduri

Optimizarea unui portofoliu de brand implica gestionarea si organizarea strategica a ofertei de produse ale unei companii pentru a maximiza valoarea globala a marcii si cota de piata. Pentru a optimiza portofoliul de marci pentru [...]

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

Citeste tot articolul

INOVEO a scris

Portofoliu de produse vs portofoliu de branduri

Portofoliul de produse se refera la gama de produse individuale pe care o companie le ofera intr-un anumit moment. Acesta cuprinde toate produsele sau serviciile pe care le comercializeaza o companie, fie ele similare sau [...]

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

Citeste tot articolul