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

The Importance of Sustainable Design in Branding

If everyone is talking about sustainability, we cannot ignore discussing it from a branding perspective. Environmental awareness has always been a growing trend. Now, more than ever, brands are under increasing pressure to adopt sustainable [...]

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

Citeste tot articolul

INOVEO a scris

„Quirky” Sans Serif Fonts: The 2024 Trend

The evolution and shifts in trends from one season to another are most pronounced when it comes to design. This year, in graphic design among other fields, we are seeing a spotlight on a category [...]

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

Citeste tot articolul

INOVEO a scris

How Complex Should Your Website Be?

It’s clear that websites are becoming increasingly large and complex, with both programmers and clients contributing to this trend. Programmers want to showcase their ability to create intricate projects, while clients desire content-rich websites filled [...]

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

Citeste tot articolul

INOVEO a scris

INOVEO Answers Questions from ZF Romanian Brands Yearbook 2024

What is the recipe for creating a brand? How long does it take to build one? How much does it cost? Where do you start and where do you end? What are the key ingredients? [...]

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

Citeste tot articolul