Variabile CSS în CSS pur – Noțiuni introductive în 5 minute sau mai puțin

Variabilele CSS (sau oficial: proprietăți personalizate ) în CSS pur reprezintă o economie de timp uriașă pentru oricine dorește să investească cinci minute pentru a învăța cum să le folosească. Acestea există încă de la CSS3 și 92% dintre toți utilizatorii au browsere care le acceptă. Utilizarea variabilelor CSS nu necesită modificări semnificative în foile de stil existente sau instrumente noi și poate fi aplicată cu ușurință proiectelor vechi. În loc să aveți un cod de culoare hexadecimal scris în sute de locuri într-un fișier, îl puteți defini într-un singur loc - cu o variabilă CSS. O economie imensă de timp și un ajutor pentru a face foile de stil mai consistente.

Stai, deci acesta este Saas sau Less, nu?

Nu, aici vorbim despre CSS pur, nu despre CSS cuplat cu un preprocesor precum Saas, Less sau SCSS. Utilizarea variabilelor CSS nu necesită instrumente suplimentare, editori sau modificări în fluxul dvs. de lucru sau orice altceva pe care îl utilizați. Prin urmare, fișierele CSS existente fără variabile nu necesită modificări „speciale” și puteți combina și potrivi – utilizați variabile numai pentru părți ale fișierului sau doar în unele fișiere este proiectul dvs.

Preprocesoarele CSS precum Saas sau Less acceptă și variabile. De asemenea, au mult mai multe funcții și opțiuni pe care le puteți utiliza. Cu toate acestea, după cum sugerează și numele, acestea necesită un preprocesor - un instrument care convertește CSS scris în Saas în CSS pur. Dacă aveți nevoie doar de variabile – CSS pur are tot ce aveți nevoie.

Variabilele CSS sunt o funcție nativă și asta le face grozave. Cu un efort minim, foile de stil sunt mult mai lizibile și mai consistente. În plus, orice modificare pe care trebuie să le faci mai târziu este mult mai ușor de făcut – cu siguranță mai rapid decât să faci căutare și înlocuire atunci când trebuie să schimbi un cod de culoare în sute de locuri .

Să creăm câteva variabile

Ca în orice limbaj de programare, există doi pași în folosirea variabilelor : acordarea de valoare (definirea lor) și utilizarea lor (punându-le în toate locurile unde aveți nevoie de această valoare). Vom face la fel;

:root {
  --my-red: #ff0080;
  --my-shadow: 3px 3px 10px green;
  --my-border: 1px solid #222222;
}

.custom-box {
  box-shadow: var(--my-shadow);
}

.custom-text {
  color: var(--my-red);
  border: var(--my-border);
}

Dacă doriți să utilizați o variabilă la nivel global (oriunde) în fișierul CSS, trebuie să o definiți în pseudo-clasa :root . Locația din fișier nu contează. Poate fi la începutul sau la sfârșitul fișierului. Dar, trebuie să puneți variabila în :root . Numele trebuie să înceapă cu o liniuță dublă -- și nu poate conține spații. Variabilele CSS pot deține orice valoare pe care o atribuiți de obicei unei proprietăți CSS; de la valori simple, cum ar fi culorile, la expresii complexe pentru proprietăți scurte precum fundalul sau umbra.

Pentru a utiliza o variabilă (pentru a-i obține valoarea) plasați-o în funcția var() . Nu uitați că toate numele variabilelor încep cu -- . Acesta este tot ce trebuie să știți pentru a începe.

Utilizarea valorilor de rezervă

În cazul în care o variabilă nu este definită, o valoare de rezervă poate fi furnizată funcției var() ca al doilea parametru.

:root {
  --my-red: #ff0080;
  --my-blue: #0020ff;
  --my-shadow: 3px 3px 10px green;
}

.custom-box {
  box-shadow: var(--my-shadow, 2px 2px 5px blue);
}

.custom-text {
  color: var(--my-red, var(--my-blue, red));
}

Nu vă faceți griji dacă valoarea proprietății este una complexă. Parametrul de rezervă permite virgulele (vezi exemplul box-shadow ). De asemenea, permite înlănțuirea mai multor funcții var() așa cum se arată pentru culoare în .custom-text . Dacă variabilele --my-red și --my-blue sunt nedefinite, atunci roșul va fi folosit ca culoare.

Combinarea var() și calc() funcționează și ea, fără surprize în sintaxă. Iată un exemplu care include o variabilă locală care este disponibilă numai în clasa în care a fost definită.

.box {
  --padding: 10px;
  
  height: calc(var(--padding) + 100px);
  padding: var(--padding);
}

Folosiți calc() cu moderație. Nu este un lucru rău, dar atunci când este suprautilizat devine destul de problematic de depanat și întreținut.

Obținerea și setarea variabilelor CSS prin JavaScript

Folosind JavaScript simplu, puteți seta noi variabile CSS și puteți accesa valorile acestora. Nu folosesc această metodă. În schimb, prefer să schimb clasa elementului. Cu toate acestea, nu este nimic greșit dacă doriți să accesați variabile CSS prin JavaScript. Cu siguranță este utilizabil în unele situații. Cei care se țin de jQuery, pot converti codul într-un plugin jQuery.

Pentru a crea o variabilă nouă sau a modifica valoarea unei variabile existente, utilizați:

// set var value
document.documentElement.style.setProperty('--my-var', 'blue');

Accesarea unei variabile este ceva mai complexă. Dacă variabila este definită prin JS, atunci utilizați:

// get var value if defined via JS
document.documentElement.style.getPropertyValue('--my-var');

Cu toate acestea, dacă este definit prin CSS (și de obicei va fi), utilizați acest cod:

// get var value if defined via CSS
getComputedStyle(document.documentElement,null).getPropertyValue('--my-var');

Probleme și lucruri la care să fii atent

Acum că știți cum să utilizați variabilele, nu exagerați cu ele și creați o variabilă pentru fiecare valoare de proprietate din foaia de stil. De exemplu, acest lucru ar fi exagerat și abuz al întregului concept;

:root {
  --spacing-10: 10px;
}

.custom-box {
  padding: var(--spacing-10);
}

Nu ai realizat nimic. Tocmai am primit --spacing-10 în loc de 10px . În curând veți ajunge să creați încă douăzeci de variabile pentru fiecare valoare a pixelilor de umplutură, de la 5 la 100 de pixeli. Dacă doriți consecvență, alegeți un concept de --small-padding, --medium-padding, --large-padding și atribuiți valori numerice adecvate.

Deși nu este cerut de standardul CSS, sugerez din toată inima definirea tuturor variabilelor într-un singur loc și la începutul fișierului CSS . În acest fel, veți ști întotdeauna unde se află și puteți schimba rapid valorile. Dacă împrăștiați definiții pe tot fișierul, veți avea dificultăți în urmărirea lucrurilor și s-ar putea ajunge să definiți aceeași variabilă în mai multe locuri. Depanarea nu va fi o sarcină distractivă.

Nu există niciun motiv să nu folosiți variabile CSS

Pe Internet, lucrurile avansează rapid (cum ar fi înlocuirea cookie-urilor cu stocarea locală). Pentru proiecte mari și echipe mari, trecerea la preprocesoare CSS precum Saas este calea corectă. Cu toate acestea, pentru proiecte mai mici sau proiecte existente care necesită întreținere, variabilele CSS în CSS pur sunt soluția potrivită . Nu necesită absolut nicio modificare, upgrade de software sau de instrumente sau altceva. Definiți o variabilă și începeți să o utilizați.