Introducere în variabilele css

Numele variabilelor CSS vorbește de la sine. Ca variabile în preprocesoare, ele stochează anumite valori care trebuie reutilizate.







Variabilele CSS funcționează pe baza proprietăților obișnuite. Variabilele sunt moștenite, dar nu puteți suprascrie valoarea prin setarea variabilei inițiale la început.

Variabilele încep cu -, și sunt numite ca o valoare utilizând construcția var (-myvar). Imaginați-vă că aceasta este o proprietate de prefix, dar cu un prefix gol (ca -webkit- numai fără cuvântul webkit). Prefixul a fost ales special pentru a putea utiliza variabilele Sass / Less fără conflicte.

Sunt setate variabilele CSS, ca și alte proprietăți. Ele pot fi chiar scrise în atributul HTML al stilului, ceea ce deschide posibilitatea unei teme. Variabilele CSS sunt sensibile la minuscule și nu pot fi goale.

Introducere în variabilele css

Curs practic pe aterizare adaptivă de la zero!

Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile

Dacă variabila este setată la o valoare incorectă pentru proprietățile la care se aplică, va fi compilat de eroare «nevalid la timp valoarea calculată» și setat la setările implicite inițiale.

Puteți specifica o folke în cazul în care variabila nu este specificată. Ca o folke pot acționa alte variabile, care pot avea și propriile lor follback-uri.

În CSS, nu există nici o concatenare (cu excepția proprietății conținutului), astfel încât variabilele CSS nu pot fi concatenate. Aceasta este, de exemplu, nu puteți combina variabile cu numere și variabile cu unități de măsură.







Design adaptabil, animație și

Cereri media

Variabilele CSS pot fi utilizate în interogările media. Un lucru foarte util: ați setat regula o dată și puteți rescrie valoarea variabilei din interogarea media.

Keyframe animație și tranziții ușoare

Deoarece nu este posibil să se determine exact ce tip de date vor fi stocate în variabila CSS, în momentul în care acestea nu sunt supuse animației. Browserul pur și simplu nu va ști ce să facă cu animația.

Dacă încercați să animați variabila în interiorul cadrelor cheie ale animației, atunci elementul va sari pur și simplu de la o valoare la alta.

Cu toate acestea, animația poate funcționa pentru anumite proprietăți dacă modificați valoarea variabilei proprietății la care se aplică proprietatea de tranziție:

Prin schimbarea culorii variabilei publice, putem genera un buton de orice culoare. În cazul nostru, butonul va avea text roșu, un cadru și un fundal atunci când se va plasa.

JS poate fi folosit pentru a prelua, instala și modifica variabilele CSS - un instrument foarte puternic.

Următorul exemplu (luat din diapozitive) stabilește variabila prin JS prin mișcarea mouse-ului. Variabila este utilizată în CSS pentru a crea un gradient radial care se mișcă în spatele cursorului mouse-ului.

Suport în browsere

Sprijinul pentru variabilele CSS este probabil mai bun decât credeți. Cu toate acestea, este încă scăzută. Potrivit site-ului CSS caniuse, variabilele sunt acceptate în toate browserele importante, cu excepția IE11 / Edge.

Ediție: Comanda webformself.

Introducere în variabilele css

Curs practic pe aterizare adaptivă de la zero!

Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile

Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame

Introducere în variabilele css

Practicați HTML5 și CSS3 de la zero la rezultatul!







Articole similare

Trimiteți-le prietenilor: