Variabilele CSS, cunoscute și ca proprietăți personalizate, vă ajută să minimizați repetarea în foile de stil. Acest lucru, la rândul său, vă ajută să economisiți timp și efort atunci când faceți modificări în design. De asemenea, puteți fi sigur că nu veți pierde nicio valoare pe care trebuie să le actualizați.
Accesul la DOM vă permite să creați variabile, să le stocați și să le reutilizați în foaia de stil.
Cum să definiți și să utilizați variabilele CSS
Pentru a face foile de stil mai aranjate, întreținute și reutilizabile, puteți utiliza variabile CSS în orice proprietate care acceptă o valoare.
Luați următorul exemplu de fișier HTML și fișier CSS care nu utilizează variabile CSS.
HTML:
html>
<htmllang="ro">
<cap>
<titlu>Variabile CSS - Variații butoanetitlu>
<legăturărel="foaia de stil"href=„Variables.css” />
cap>
<corp>
<div>
<h1>Variabile CSSh1>
<div>
CSS:
.btn {
căptușeală: 1rem 1.5rem;
fundal: transparent;
greutate font: 700;
culoarea rosie;
}
Iată cum ar trebui să arate pagina ta:
The .btn clasa utilizată în foaia de stil de mai sus nu este dinamică și vă determină să creați o clasă separată pentru a personaliza butoanele individuale. Crearea de site-uri web frumoase necesită să fii dinamic cu stilul tău front-end. Implementarea butoanelor în acest fel va face pur și simplu această sarcină dificil de realizat.
La fel ca majoritatea limbajelor de programare, trebuie să inițializați și să înlocuiți variabilele CSS.
Pentru a inițializa o variabilă CSS, prefixați numele variabilei cu cratime duble:
:rădăcină{
/*variabilă CSS*/
--nume_variabilă: valoare;
}
Puteți inițializa o variabilă oriunde, dar rețineți că veți putea folosi acea variabilă numai în interiorul selectorului inițializat. Din acest motiv, variabilele CSS sunt inițializate în mod convențional în interiorul selectorului rădăcină. Aceasta vizează elementul de cel mai înalt nivel al DOM și permite ca variabilele să fie accesibile de către întregul document HTML la scară globală.
Pentru a înlocui variabila în stilul dvs. CSS, veți folosi var() proprietate:
:rădăcină {
/*variabilă CSS*/
--primar: #900c3f;
--secundar: #ff5733;
}.btn {
căptușeală: 1rem 1.5rem;
fundal: transparent;
greutate font: 700;
culoare: var(--primar);
culoare de fundal: var(--secundar);
}
.subprimar {
culoare: var(--secundar);
culoare de fundal: var(--primar);
}
Selectorul de rădăcină conține două variabile: --primar și --secundar. Ambele variabile sunt apoi substituite în .btn clasa ca culoare și, respectiv, culoare de fundal.
Folosind variabilele, puteți stila elementele individuale mult mai ușor. Prin reutilizarea variabilelor, puteți modifica rapid o valoare o dată pentru a o actualiza în fiecare caz.
The var() proprietatea poate lua și un al doilea argument. Acest argument acționează ca o valoare de rezervă pentru primul argument într-o situație în care primul nu este definit sau este invalid.
De exemplu:
:rădăcină {
--primar: #900c3f;
--secundar: #ff5733;
}
.btn {
căptușeală: 1rem 1.5rem;
fundal: transparent;
greutate font: 700;
culoare: var(--primar, albastru);
}
În acest exemplu, înlocuiți --primar variabilă în culoare stil. Dacă din orice motiv, această valoare eșuează, foaia de stil va folosi a doua valoare ca alternativă. De asemenea, puteți utiliza o altă variabilă CSS ca valoare de rezervă.
Manipularea și suprascrierea variabilelor CSS cu JavaScript
Manipularea variabilelor CSS folosind JavaScript poate fi o modalitate puternică de a schimba aspectul site-ului dvs. din mers. Folosind JavaScript, puteți actualiza valorile acestor variabile și puteți vedea modificările reflectate în site-ul dvs.
Este important să rețineți că modificările făcute cu JavaScript se vor aplica numai sesiunii curente. Trebuie fie să actualizați sursa originală, fie stocați noua valoare pe client, ca într-un cookie, pentru a persista schimbările.
Iată un exemplu despre cum să utilizați JavaScript pentru a actualiza valoarea unei variabile CSS.
HTML:
html>
<htmllang="ro">
<cap>
<titlu>Variabile CSS - Variații butoanetitlu>
<legăturărel="foaia de stil"href=„Variables.css” />
<scenariu>
funcţieschimba culoarea() {
// Obțineți elementul pe care doriți să modificați variabila
const myElement = document.querySelector(":rădăcină");// Obține valoarea curentă a variabilei
lăsa currentValue = getComputedStyle (myElement).getPropertyValue(
"--secundar"
);
// A stabilit cel nouvaloarepentru cel variabil
elementul meu.stil.setProperty("--secundar", "#DAF7A6");
}
scenariu>
cap>
<corp>
<div>
<h1>Variabile CSSh1>
<div>
CSS:
:rădăcină {
--primar: #900c3f;
--secundar: #ff5733;
}.btn {
căptușeală: 1rem 1.5rem;
fundal: transparent;
greutate font: 700;
}
.subprimar {
culoare: var(--primar);
culoare de fundal: var(--secundar);
}
În acest cod JavaScript, schimba culoarea() funcția actualizează culoarea primului buton atunci când utilizatorul face clic pe el.
Folosind Metode de traversare DOM, puteți accesa clasele sau selectoarele aplicate în documentul dvs. HTML și puteți manipula valorile.
Înainte de a face clic pe butonul:
După ce faceți clic pe butonul:
De asemenea, puteți utiliza JavaScript pentru a crea variabile CSS noi sau pentru a le elimina cu totul.
De exemplu:
// Crea A nouvariabil
document.documentElement.style.setProperty(„--nouă-culoare”, 'albastru');
// Eliminați o variabilă
document.documentElement.style.removeProperty(„--nouă-culoare”);
Utilizarea variabilelor CSS cu preprocesoare
Utilizarea variabilelor în tehnologia frontend a fost realizată inițial cu preprocesoare CSS precum SASS, LESS și Stylus.
Scopul preprocesoarelor CSS este de a dezvolta cod care extinde capacitățile fundamentale ale CSS standard. Apoi, compilați acel cod în CSS standard pentru ca browserul să-l înțeleagă, la fel ca cum funcționează TypeScript cu JavaScript.
Odată cu dezvoltarea variabilelor CSS, preprocesoarele nu mai sunt la fel de importante, dar pot oferi totuși o anumită utilizare dacă sunt combinate cu variabile CSS în proiectul dvs.
Puteți defini o variabilă SASS $culoare-principală și folosiți-l pentru a seta valoarea unei variabile CSS. Apoi, utilizați variabila CSS într-o clasă de stil obișnuită.
De asemenea, puteți utiliza funcțiile SASS pentru a manipula valorile variabilelor CSS.
De exemplu:
:rădăcină {
--primary: $main-color;
--secundar: lumina(var(--primar), 20%);
}
.btn {
culoare: var(--primar);
culoare de fundal: var(--secundar);
}
Aici, funcția SASS uşura() manipulează valoarea de --primar pentru a obține o valoare pentru --secundar.
Rețineți că variabilele SASS nu sunt accesibile prin JavaScript. Deci, dacă trebuie să manipulați valorile variabilelor dvs. în timpul execuției, ar trebui să utilizați variabile CSS.
Folosind împreună variabilele CSS și preprocesoarele, puteți profita de ambele beneficii, cum ar fi utilizarea funcții puternice ale preprocesorului, cum ar fi bucle și funcții, și variabile CSS, cum ar fi CSS în cascadă.
Sfaturi pentru utilizarea variabilelor CSS în dezvoltarea web
Iată câteva sfaturi importante de reținut, care vă vor ajuta să utilizați mai bine variabilele CSS.
Începeți cu o convenție clară de denumire
Alegeți o convenție de denumire pentru variabilele dvs., care să le facă ușor de înțeles și de utilizat. De exemplu, utilizați un prefix precum --culoare- pentru variabilele de culoare sau --spațiere- pentru variabilele de spaţiere.
Utilizați variabile în interogările media pentru a vă facilita ajustarea designului pentru diferite dimensiuni de ecran.
Profită de natura în cascadă a CSS
Amintiți-vă că variabilele CSS sunt în cascadă, ceea ce înseamnă că dacă setați o variabilă pe un element părinte, aceasta va afecta toți copiii acestuia.
Utilizați variabilele CSS cu prudență
Utilizarea prea multor variabile CSS poate provoca confuzie, așa că utilizați-le cu prudență și numai atunci când are sens și îmbunătățește mentenabilitatea codului dvs.
Testați-vă variabilele
Variabilele CSS sunt o modalitate unică de a scrie cod clar și ușor de întreținut în foaia de stil.
Este important de reținut că acestea nu sunt încă pe deplin acceptate de toate browserele. Prin urmare, ar trebui să testați variabilele pentru compatibilitatea cu browserul pentru a vă asigura că funcționează conform așteptărilor și că orice valoare alternativă funcționează așa cum vă așteptați.
