Variabile CSS
Variabilele au devenit un instrument nativ în CSS, acum nu sunt doar în preprocesoare. În preprocesoarele CSS precum Sass, variabilele sunt foarte populare.
Cu cât suportul pentru variabilele din browsere este mai bun (fără Edge și IE), cu atât este mai ușor să le folosiți în cod.
Cum se declară variabilele CSS
Cel mai bine este să declarați variabilele CSS în pseudo-class: root în antetul de stil. Clasa pseudo: rădăcina se referă la cel mai înalt părinte din DOM, de obicei o etichetă HTML. Unul dintre selectorii universali.
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
Pseudo-clasa: rădăcina acționează ca selector. Variabila începe cu două liniuțe, urmată de numele și valoarea variabilei. Mai departe, în cod, variabila creată poate fi menționată în toate cazurile potrivite pentru aceasta. exemplu:
În acest exemplu, modificăm culoarea de fundal pentru toate paragrafele la valoarea scrisă în variabila -primary-color. În această variabilă, care se află în clasa pseudo-class: root, valoarea roșie este deja scrisă.
Cum să utilizați corect variabilele CSS
Dacă trebuie să schimbați culoarea de la roșu la albastru, trebuie fie să utilizați o variabilă cu numele greșit pe întreg codul, fie să modificați variabila în toate locurile.
Cel mai probabil, ați dori să evitați ambele probleme, deoarece acestea ucid ideea de editare rapidă și ușoară a codului.
Crearea mai corectă a variabilelor CSS, după cum se arată mai jos, în două etape:
Crearea în două etape a variabilelor, așa cum se arată mai sus, vă permite să editați cu ușurință și eficient codul. Dacă trebuie să modificați nuanța roșie în toate stilurile, trebuie doar să modificați variabila -red. În caz contrar, va trebui să modificați manual toate valorile.
De asemenea, la nivelul variabilelor în acest fel, puteți schimba culoarea principală de pe site. Dacă doriți să puneți o culoare albastră, trebuie să faceți doar doi pași.
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
Mai întâi trebuie să declarați o variabilă cu o culoare albastră, apoi setați-o ca valoare a culorii de bază. Mai jos este un exemplu bazat pe cel precedent.
Aplicare practică
Variabilele CSS au multe exemple de aplicații practice (și impracticabile). Îți voi spune despre practica din punctul meu de vedere.
Ghiduri privind culorile și stilurile
Folosind variabilele, puteți crea ghiduri de stil și le puteți modifica cu ușurință. Cea mai bună cale. Mai jos este un exemplu practic de manual privind stilurile folosind culorile.
Pe termen lung, acest proces vă permite să editați rapid și ușor codul. Puteți efectua modificări minore ale culorii și nu puteți edita întregul CSS.
Marginile și garniturile
Folosind variabilele, puteți seta marginea și padding-ul în mod implicit. exemplu:
Înălțime și lățime
Un subiect interesant, cu ajutorul funcției calc (), puteți efectua calcule. Înainte de a explica, voi da un exemplu:
Puteți seta dimensiunile pentru blocul părinte și puteți calcula dimensiunile elementelor copil în raport cu părintele. Metoda funcționează bine, mai ales pentru crearea elementelor adaptive.
Alte modalități de a aplica variabilelor în stiluri
Variabilele sunt foarte potrivite pentru fonturi de stil, cutie-umbre, animații etc. Variabilele pot fi utilizate în orice mod.
Notă: demo-ul de mai jos poate fi editat direct pe pagină.
Demo cu variabile CSS
Ediție: Comanda webformself.
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
