Salut prieteni, în legătură cu Șevcenko Vyacheslav, și astăzi nu am un mare, dar un post interesant. Ați întâlnit vreodată problema proliferării proiectelor și organizarea codului css? Cred ca raspunsul este clar DA, daca NU, atunci totul este inaintea ta.
Atunci când un proiect începe să crească, CSS-ul său devine, de obicei, greoi și puternic menținut. Pentru a rezolva această problemă, dezvoltatorii CSS au introdus variabile, ele sunt deja acceptate de browsere populare. Acest lucru facilitează lucrul cu repetările stilurilor.
Lucrătorii familiarizați și experimentați cu aspect pot obiecta și pot spune că "Variabilele au fost mult timp în SASS și mai puțin!". Da, nu mă cert, dar sunt preprocesoare și trebuie să fie compilate înainte de utilizare, iar variabilele CSS native funcționează chiar în browser! Nu e misto?
Variabilele din fișier utilizează același domeniu ca și alte reguli din CSS. Desigur, cel mai convenabil atunci când acestea sunt globale. Pentru a face acest lucru, trebuie să le declarați în interiorul clasei pseudo-class: rădăcină.
Un pic despre sprijin
Acum, variabilele funcționează în Firefox și Chrome cu cea mai recentă versiune. Puteți obține cele mai recente informații de asistență aici.
Mai jos vă voi da câteva exemple care vor demonstra bine cazurile tipice de utilizare a variabilelor CSS. Dacă exemplele dvs. nu funcționează, asigurați-vă că aveți cea mai recentă versiune a browserului.
Culorile pielii
Variabilele sunt foarte utile atunci când trebuie să utilizați proprietățile în mod repetat. Un exemplu bun este schema de culori a designului. În loc să copiem culoarea de la regulă la regulă, putem să o plasăm într-o variabilă și să o luăm de acolo.
Și când dintr-un motiv oarecare trebuie să schimbați culoarea temei sau să creați o piele nouă, puteți schimba culoarea numai într-un singur loc, dar modificările vor afecta toate paginile site-ului.
Nume prietenoase pentru proprietăți
Cea de-a doua modalitate convenabilă de a utiliza variabilele este de a crea anumite presetări atunci când nu dorim să ne amintim o valoare lungă a proprietății, de exemplu pentru transformare. box-shadow și font.
Prin plasarea valorii unei proprietăți într-o variabilă, o putem numi folosind nume prietenoase.
Valori dinamice ale variabilelor
Exemplul de mai jos arată cât de ușor este să manipulați dinamic proprietățile. lăsând codul curat.
Mai multe sfaturi
După cum puteți vedea, variabilele din CSS sunt un instrument destul de simplu de utilizat și nu necesită prea mult timp pentru a învăța. Și câteva lucruri pe care trebuie să le cunoașteți:
Funcția var () are două argumente, cea de-a doua este folosită dacă ceva nu este în regulă cu variabila:
Articole similare
Trimiteți-le prietenilor: