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

Dochita Zenoveiov a scris

Touchpoints Workshop

Brandingul nu e doar numele si logo-ul. Este si despre touchpointuri. Saptamana trecuta un prospect mi-a dezvaluit ca s-a intalnit cu noi doar pentru ca un fost client de-al nostru a insistat sa ne cunoasca, [...]

Citeste tot articolul from Utilizarea de variabile CSS in stilizarea website-urilor

Citeste tot articolul

Dochita Zenoveiov a scris

Nume evocativ

Cum isi construiesc asiaticii strategia de #naming. Cum isi aleg numele. Sa luam exemplul Samsung. E un nume descriptiv, evocativ sau abstract? Lee Byung-chull, fondatorul Samsung, a urmat cursurile Universitatii Waseda din Tokyo, Japonia, dar [...]

Citeste tot articolul from Utilizarea de variabile CSS in stilizarea website-urilor

Citeste tot articolul

Dochita Zenoveiov a scris

Customer Journey Workshop

Acesta se refera la toate interactiunile si etapele prin care trece un client in timp ce interactioneaza cu un brand. Customer Journey-ul include toate punctele de contact si canalele prin care un client vine in [...]

Citeste tot articolul from Utilizarea de variabile CSS in stilizarea website-urilor

Citeste tot articolul

Dochita Zenoveiov a scris

Customer experience

Saptamana trecuta m-a rugat un partener sa fac un workshop de brand cu echipa sa si cred ca a sosit momentul sa vorbesc despre workshopurile pe care le facem pentru ca sunt diverse, au obiective [...]

Citeste tot articolul from Utilizarea de variabile CSS in stilizarea website-urilor

Citeste tot articolul