Proprietățile personalizate CSS (cunoscute și sub numele de variabile) reprezintă un mare câștig pentru dezvoltatorii front-end. Aduce puterea variabilelor către CSS, ceea ce duce la mai puține repetări, o mai bună lizibilitate și mai multă flexibilitate.

În plus, spre deosebire de variabilele din preprocesoarele CSS, variabilele CSS fac de fapt parte din DOM, care are o mulțime de beneficii. Deci sunt în esență ca variabilele SASS și LESS pe steroizi. În acest articol, vă voi oferi un curs rapid despre modul în care funcționează această nouă tehnologie.

De asemenea, am creat un curs gratuit și interactiv în 8 părți cu variabile CSS, deci verificați-l dacă doriți să deveniți un expert pe acest subiect.

Doriți să învățați variabile CSS? Iată cursul meu gratuit în 8 părți!

De ce să învețe variabile CSS?

Există multe motive pentru a utiliza variabile în CSS. Una dintre cele mai convingătoare este că reduce repetarea în foaia de stil.

Aflati variabile CSS in 5 minute Un tutorial pentru

În exemplul de mai sus este mult mai bine să creați o variabilă pentru #ffeead culoare decât să o repetăm ​​așa cum facem aici:

1611458465 612 Aflati variabile CSS in 5 minute Un tutorial pentru

Nu numai că acest lucru vă va ușura citirea codului, dar vă oferă și mai multă flexibilitate, în cazul în care doriți să schimbați această culoare.

Acum acest lucru a fost într-adevăr posibil cu variabilele SASS și LESS de ani de zile. Cu toate acestea, există câteva avantaje mari cu variabilele CSS.

  1. Nu necesită nicio transpilare pentru a funcționa, deoarece sunt originare din browser. Deci, nu aveți nevoie de nicio configurare pentru a începe, așa cum faceți cu SASS și LESS.
  2. Locuiesc în DOM, ceea ce deschide o mulțime de beneficii, pe care le voi trece în acest articol și în cursul meu viitor.

Acum să începem să învățăm variabile CSS!

Declararea primei variabile CSS

Pentru a declara o variabilă, trebuie mai întâi să decideți în ce domeniu ar trebui să trăiască variabila. Dacă doriți să fie disponibilă la nivel global, pur și simplu definiți-o pe :root pseudo-clasă. Se potrivește cu elementul rădăcină din arborele documentului dvs. (de obicei <html> etichetă).

Pe măsură ce variabilele sunt moștenite, aceasta va face ca variabila dvs. să fie disponibilă în întreaga aplicație, deoarece toate elementele DOM sunt descendenți ai <html> etichetă.

:root {  
  --main-color: #ff6f69;  
}

După cum puteți vedea, declarați o variabilă la fel cum ați seta orice proprietate CSS. Cu toate acestea, variabila trebuie să înceapă cu două liniuțe.

Pentru a accesa o variabilă, trebuie să utilizați var() funcție și treceți numele variabilei ca parametru.

#title {  
  color: var(--main-color);  
}

Și asta îți va da titlul #f6f69 culoare:

1611458465 226 Aflati variabile CSS in 5 minute Un tutorial pentru

Declararea unei variabile locale

De asemenea, puteți crea variabile locale, care sunt accesibile numai elementului la care este declarat și copiilor săi. Acest lucru este logic de făcut dacă știți că o variabilă va fi utilizată numai într-o anumită parte (sau părți) din aplicația dvs.

De exemplu, este posibil să aveți o casetă de alertă care folosește un tip special de culoare care nu sunt utilizate în alte locuri din aplicație. În acest caz, ar putea avea sens să evităm plasarea în domeniul global:

.alert {  
  --alert-color: #ff6f69;  
}

Această variabilă poate fi utilizată acum de copiii săi:

.alert p {  
  color: var(--alert-color);  
  border: 1px solid var(--alert-color);  
}

Dacă ați încercat să utilizați alert-color variabilă în altă parte a aplicației dvs., de exemplu în bara de navigare, pur și simplu nu ar funcționa. Browser-ul ar ignora linia CSS.

Răspuns mai ușor cu variabile

Un mare avantaj al variabilelor CSS este că au acces la DOM. Nu este cazul LESS sau SASS, deoarece variabilele lor sunt compilate până la CSS obișnuit.

În practică, acest lucru înseamnă că puteți, de exemplu, modifica variabilele pe baza lățimii ecranului:

:root {  
  --main-font-size: 16px;  
}

media all and (max-width: 600px) {  
  :root {  
    --main-font-size: 12px;  
  }  
}

Și cu aceste patru linii de cod simple, ați actualizat dimensiunea principală a fontului în întreaga aplicație când ați vizualizat pe ecrane mici. Destul de elegant, nu?

Cum se accesează variabilele cu JavaScript

Un alt avantaj al vieții în DOM este că puteți accesa variabilele cu JavaScript și chiar să le actualizați, de exemplu, pe baza interacțiunilor utilizatorilor. Acest lucru este perfect dacă doriți să oferiți utilizatorilor posibilitatea de a vă schimba site-ul (cum ar fi ajustarea dimensiunii fontului).

Să continuăm exemplul de la începutul acestui articol. Prinderea unei variabile CSS în JavaScript necesită trei linii de cod.

var root = document.querySelector(':root');  
var rootStyles = getComputedStyle(root);  
var mainColor = rootStyles.getPropertyValue('--main-color');

console.log(mainColor);   
--> '#ffeead'

Pentru a actualiza variabila CSS pur și simplu sunați la setProperty metoda pe elementul în care variabilele au fost declarate și trec în numele variabilei ca primul parametru și noua valoare ca al doilea.

root.style.setProperty('--main-color', '#88d8b0')

Această culoare principală poate schimba întregul aspect al aplicației dvs., deci este perfectă pentru a permite utilizatorilor să seteze tema site-ului dvs.

Actualizând o singură variabilă puteți schimba culoarea barei de navigație, a textului și a elementelor.

Actualizând o singură variabilă puteți schimba culoarea barei de navigație, a textului și a elementelor.

Suport pentru browser

În prezent, 77% din traficul global al site-urilor web acceptă variabile CSS, cu aproape 90% în SUA. Folosim deja variabile CSS la Scrimba.com pentru o vreme acum, deoarece publicul nostru este destul de priceput în tehnologie și folosește mai ales browsere moderne.

1611458467 781 Aflati variabile CSS in 5 minute Un tutorial pentru

Ok, asta a fost. Sper că ai învățat ceva!

Dacă doriți să-l învățați corect, asigurați-vă că ați verificat cursul meu gratuit CSS Variables la Scrimba.


Mulțumesc pentru lectură! Numele meu este Per Borgen, sunt cofondatorul Scrimba – cel mai simplu mod de a învăța să codezi. Ar trebui să verificați bootcamp de design web receptiv dacă doriți să învățați să construiți un site web modern la nivel profesional.

1611011407 121 Aflati TypeScript gratuit cu acest curs interactiv Scrimba
Faceți clic aici pentru a ajunge la bootcampul avansat.