Share
Există variabile invariabil în toate limbile de programare, și asta pentru că sunt destul de utile. Trebuie doar să stocați o valoare într-o variabilă o dată și apoi să o utilizați mai târziu de mai multe ori, evitând repetarea. În timp ce CSS nu este un limbaj de programare, lipsa variabilelor încă limitează capacitățile sale.
Acum, că variabilele CSS native sunt în jur, aș vrea să discut despre modul în care sunt diferite de variabilele pe care preprocesoarele CSS le oferă și cum să le utilizeze în mod corespunzător.
Sintaxa pentru utilizarea proprietăților personalizate este puțin verbală, iar unii dezvoltatori ar putea considera că este urât. Un alt factor care descurajează utilizarea variabilelor native este suportul existent furnizat de variabilele Sass.
În timp ce preprocesoarele precum variabilele de suport Sass, au încă unele limitări pe care le voi discuta în această secțiune.
Nu puteți actualiza variabilele preprocesorului pe baza interogărilor media. Pentru a face un site receptiv, trebuie să modificați valori pe baza dimensiunilor ecranului. Variabilele de procesare nu pot face acest lucru. De exemplu, luați în considerare următorul cod:
$ articol-marja: 1em 0.5em; @media (min-lățime: 1024px) $ article-margin: 2em 1em; .my-article marja: $ articol-margine;
Se va compila la:
.articolul meu marja: 1em 0.5em;
După cum puteți vedea, atribuirea din interogarea media este complet ignorată. Pe de altă parte, variabilele CSS vor respecta această atribuire într-o interogare media.
În mod similar, variabilele preprocesorului nu sunt nici cascadă, nici moștenite. Folosind variabilele native, puteți să îndepărtați toate aceste limitări. Un alt avantaj important al utilizării variabilelor native este că acestea sunt interoperabile. Spre deosebire de variabilele Sass, care vor funcționa doar cu Sass, variabilele native vor funcționa nu numai cu toate preprocesoarele, ci și în fișiere CSS simple.
Pentru a înțelege cum să folosiți proprietățile personalizate CSS, să începem cu un exemplu de bază:
: rădăcină - text-color: crimson; .mai-secțiunea culoare: var (- text-color, negru);
Ori de câte ori definiți o proprietate personalizată, începeți să definiți domeniul de aplicare. Domeniul de aplicare determină nodurile DOM la care proprietatea personalizată ar putea fi disponibilă. Utilizarea :rădăcină implică faptul că proprietatea personalizată este disponibilă pentru toate elementele. Rețineți că toate proprietățile personalizate trebuie să înceapă cu două liniuțe.
Dacă intenționați să utilizați o proprietate personalizată, va trebui să o referiți la ea var () funcţie. Această funcție are două argumente; prima este proprietatea personalizată în sine, iar a doua este o valoare de rezervă. Valoarea de rezervă se utilizează atunci când o proprietate personalizată nu este declarată pe niciunul dintre strămoși sau dacă valoarea acesteia este nevalidă.
Trebuie să rețineți că proprietățile personalizate fac diferența între majuscule și minuscule. Asta presupune că --culoarea textului , --Culoarea textului, și --culoarea textului sunt diferite.
Există încă câteva lucruri care ar trebui păstrate în minte în timpul utilizării var ().
Primul este că valorile de rezervă pot fi separate prin virgulă, iar în cazul valorii stenogramelor ca marja, nu trebuie să separați valorile individuale cu o virgulă. De exemplu, var (- para-font-familie, "Lato", "Roboto"); setează valoarea de referință ca "Lato" "Roboto";. În mod similar, o rezervă pentru proprietatea de frontieră va arăta astfel:
a border: var (- link-border, 1px marcat punct maro);
Al doilea este că nu puteți folosi variabilele ca nume de proprietăți. Următorul cod va arunca o eroare la a doua declarație.
h1 -my-size: font-size; var (- dimensiunea mea): 2em;
Cu ajutorul noțiunilor de bază, să vedem cum putem construi valori din proprietățile personalizate. Dacă ați atribuit un număr gol unei variabile, nu veți putea să o adăugați direct la o anumită unitate pentru a obține o valoare validă. Pe scurt, codul de mai jos este nevalid:
.citează -t-padding: 20; varf de varf: var (- t-padding) px; // nu va funcționa
Va trebui să utilizați calc () funcția de a efectua câteva calcule și a forma valori finale ale CSS. Pentru a face ca codul de mai sus să funcționeze, va trebui să îl modificați pentru a arăta astfel:
.citează -t-padding: 20; padding-top: calc (var (- t-padding) * 1px); // Va functiona
Nu vă limitați doar la px unități. Puteți utiliza toate unitățile valide disponibile în CSS.
Variabilele CSS native pot interacționa, de asemenea, cu JavaScript. Pentru a obține valorile acestora, puteți folosi următorul cod:
Accentsconagua
variantele var = getComputedStyle (document.documentElement); var bgValue = Șir (stiles.getPropertyValue ('- background')) trim (); tunde() va elimina spațiul alb din ambele capete ale valorii dvs..
Dacă doriți să setați valoarea unei proprietăți personalizate, va trebui să utilizați valoarea setProperty () metodă.
document.documentElement.style.setProperty ('- fundal', 'negru'); --fundal variabila este acum negru. De asemenea, puteți seta o proprietate personalizată să se refere la alta folosind var () funcţie.
document.documentElement.style.setProperty ('- h-color', 'var (- p-color)');Instrucțiunea de mai sus este complet validă și stabilește valoarea --h-culoare egal cu --p-color.
Variabilele pot oferi o mulțime de flexibilitate atunci când vine vorba de schimbarea temelor pe baza preferințelor unui utilizator. Anterior, a trebuit fie să folosiți stilul inline, fie să creați foi de stil multiple. Ambele metode au propriile demersuri. Crearea mai multor stiluri de stil este o durere de cap, iar utilizarea stilului inline este o practică proastă. Variabilele pot oferi o cale ușoară în această situație. Iată câteva opțiuni de bază pentru a schimba teme dinamic:
document.getElementById ("verde"). addEventListener ("click", greenTheme); funcția greenTheme () var greenShades = document.documentElement.style; greenShades.setProperty ('- temă-font', 'Dosis'); greenShades.setProperty ('- titlu-fundal', 'hsl (90, 70%, 60%)'); // Setați mai multe astfel de valori Codul de mai sus atașează un eveniment clic pe butonul temei. De îndată ce cineva face clic pe el, funcția greenTheme () stabilește valorile câtorva variabile pentru a schimba aspectul general al site-ului web. După cum puteți vedea, această metodă a fost mult mai ușor de implementat decât celelalte două soluții.
Puteți încerca să adăugați alte câteva variabile sau să creați mai multe teme în acest demo CodePen.
Tutorialul pare să sugereze că variabilele CSS native sunt superioare variabilelor în preprocesoare precum Sass, dar nu subminez în nici un fel utilitatea preprocesoarelor. Utilizarea diverselor preprocesoare CSS crește productivitatea. Ei au mult mai multe de oferit decât variabilele. Numeroase funcții încorporate, bucle și afirmații condiționale pot face lucrurile repede.
Acest tutorial arată doar faptul că, chiar dacă variabilele native au o sintaxă ciudată, ei încă mai au mult de oferit și merită folosiți în proiectele dvs. Dacă aveți întrebări legate de acest tutorial, anunțați-ne în comentarii.
