Unul dintre cele mai bune cazuri de utilizare pentru variabilele CSS este crearea de teme. Și prin aceasta, nu mă refer doar la schimbarea temelor pentru întreaga dvs. aplicație, deoarece probabil că nu este ceva ce trebuie să faceți foarte des. Ceea ce este mai relevant este capacitatea de a crea cu ușurință teme specifice componentelor.

Acest lucru ar putea fi, de exemplu, atunci când trebuie să marcați un produs de comerț electronic ca adăugat în coș. Sau poate site-ul dvs. are o secțiune de administrare care include o secțiune mai întunecată a barei laterale.

Variabile CSS vă permit să faceți acest lucru într-un mod mai simplu și mai flexibil decât era posibil anterior. În acest articol, voi explica exact cum.

De asemenea, am creat un screencast despre crearea de teme în free Curs Variabile CSS în 8 părți. Dacă sunteți interesat să aflați mai multe despre curs, verificați Acest articol.

Conţinut

Pregatirea

De exemplu, vom lucra cu un site de portofoliu. Obiectivul nostru este să putem prezenta unul dintre proiectele din portofoliul nostru, astfel încât să se distingă de restul mulțimii. Din punct de vedere tehnic, vom face acest lucru adăugând o clasă la elementul specific pe care dorim să îl prezentăm.

Iată cum arată site-ul portofoliului inițial:

Cum sa creati cu usurinta teme cu variabile CSS

Nu mă voi deranja să vorbesc despre HTML pentru site, deoarece este destul de simplu și presupun că știi HTML. Cu toate acestea, dacă sunteți interesat să vă lăsați cu codul, am creat un loc de joacă Scrimba pentru acesta Aici.

Acum, să sărim direct în CSS. Iată foaia noastră de stil înainte de a începe să folosim variabile CSS:

html, body {  
  background: #ffeead;  
  color: #ff6f69;  
}

h1, p {  
  color: #ff6f69;  
}

#navbar a {  
  color: #ff6f69;  
}

.item {  
  background: #ffcc5c;  
}

button {  
  background: #ff6f69;  
  color: #ffcc5c;  
}

După cum puteți vedea, folosim doar trei culori aici: #ffeead, #ff9f96 și #ffcc5c. Cu toate acestea, le refolosim mult. Deci, acesta este un caz de utilizare perfect pentru variabilele CSS.

Pentru a începe utilizarea acestuia, va trebui mai întâi să declarăm variabilele noastre. Vom face asta în :root pseudo-clasă:

:root {  
  --red: #ff6f69;  
  --beige: #ffeead;  
  --yellow: #ffcc5c;  
}

Apoi, vom schimba pur și simplu valorile noastre hexazecimale cu variabilele:

html, body {  
  background: var(--beige);  
  color: var(--red);  
}

h1, p {  
  color: var(--red);  
}

#navbar a {  
  color: var(--red);  
}

.item {  
  background: var(--yellow);  
}

button {  
  background: var(--red);  
  color: var(--yellow);  
}

Acum avem puterea variabilelor în CSS-ul nostru, ceea ce înseamnă că putem schimba pur și simplu --red la altceva și va fi actualizat pe întregul nostru site.

Dacă vă chinuiți să înțelegeți ce se întâmplă aici, vă rugăm să verificați Aflați articolul CSS Variables în 5 minute articol, sau înscrieți-vă în curs.

Crearea unei teme

Acum să creăm tema. Vrem capacitatea de a adăuga un .featured clasează la unul dintre cele patru elemente ale proiectului nostru și, prin urmare, faceți obiectul respectiv să se distingă de restul. Mai exact, vom schimba roșu în #ff5564 și galben#ffe55b.

Iată cum va arăta în markup:

<div class="item **featured**">  
  <h1>project d</h1>  
  <button>learn more</button>  
</div>

Această modificare ar trebui să afecteze stilul în patru locuri diferite:

  • culoarea de fundal a <div>
  • culoarea<h1>
  • culoarea de fundal a <button>
  • culoarea <button>

Vechiul mod

Modul în care a trebuit să rezolvăm acest lucru anterior a fost prin crearea unui selector CSS personalizat pentru fiecare element din .featured articol, ca acesta:

.featured {  
  background: #ffe55b;  
}

.featured > h1 {  
  color: #ff5564;  
}

.featured > button {  
  background: #ff5564;   
  color: #ffe55b;  
}

Această abordare nu este foarte flexibilă. Dacă ar fi să adăugați un alt element în articolele din portofoliu, ar trebui să scrieți și selectoare specifice pentru acestea.

Noua cale

Cu variabilele CSS, însă, devine mult mai ușor. Pur și simplu vom înlocui variabilele din interiorul .featured o clasă ca aceasta:

.featured {  
  --yellow: #ffe55b;  
  --red: #ff5564;  
}

Deoarece variabilele CSS sunt moștenite, toate elementele din interior .featured care referință --red sau--yellow acum folosiți valorile locale și nu cele globale. Asa ca <button> sau <h1> elementele folosesc automat valorile locale pentru variabile.

Iată cum se joacă pe pagină.

După cum puteți vedea, elementul „proiect d” arată puțin diferit de restul.

După cum puteți vedea, elementul „proiect d” arată puțin diferit de restul.

Ingrijit, sau ce?

Gândiți-vă cum ar fi acest lucru dacă am construi o componentă mai complexă, de exemplu, un articol de produs într-o aplicație de comerț electronic. Poate include titluri, subtitrări, paragrafe, imagini, subtitrări, butoane, evaluări și multe altele. Este mult mai ușor și mai flexibil să întoarceți pur și simplu valoarea unor variabile în loc să creați selectoare personalizate pentru fiecare dintre descendenți.

Dacă sunteți interesat să aflați mai multe despre această tehnologie, vă rugăm să consultați gratuit Curs Variabile CSS interactive în 8 părți pe 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.