Share
Comunitatea de dezvoltare web a primit recent câteva știri importante. În timp ce nu se află încă în nocturnă, experimentările sunt, încă o dată, în curs de desfășurare, care, dacă reușesc, ne vor oferi suport nativ pentru variabilele CSS, mixuri și module în browsere. Întrebarea este, însă, că este un lucru bun?
Înainte de a progresa, rețineți că aceste evoluții sunt încă în stadiile experimentale. Încă nu au fost implementate în niciun browser.
Dacă sunteți puțin familiarizați cu preprocesoarele CSS, cum ar fi Less sau SASS, veți avea o înțelegere de bază a ceea ce să vă așteptați din aceste adăugiri. (Sintaxa propusă, din păcate, este puțin diferită.) În viitor, veți avea capacitatea de a crea variabile (globale și locale) și mixuri, pe care le puteți gândi ca o colecție de stilizări care pot fi utile de referință.
Atâta timp cât îmi amintesc, comunitatea a cerut variabilele CSS; Deci, ce a fost de așteptare? Într-un cuvânt: dezacord. De fapt, din 2008, webkit se juca cu această caracteristică - chiar până la punerea în aplicare a acesteia în noaptea de vară - totuși, propunerea sa oprit nu după mult timp. Mulți au simțit că transformarea CSS într-o mai mult programator-like limbajul ar introduce doar frustrare; unii chiar au simțit că ar putea confunda designeri. De exemplu, dacă culoarea primară din proiectul dvs. este stocată într-o variabilă - probabil în partea superioară a foii de stil, atunci ar fi cerut proiectantului să se refere la două locații.
@myColor: roșu;
/ * Mai puțin sintaxă * / #someElem culoare: @myColor;
Deși acest argument este valabil într-o oarecare măsură, acesta nu are prea multă pondere. Cei mai mulți designeri mențin un set de site-ul de culori în partea de sus a foii de stil, pe care le folosesc pentru referință. Introducerea variabilelor pentru a conține aceste valori este o soluție logică.
Fanii mai puțin sau SASS vor fi obișnuiți să definească variabile cum ar fi:
/ * Mai puțin * / @ primar_color: roșu; / * SASS * / $ primary_color: roșu;
Sintaxa propusă complică lucrurile un pic prin introducerea variabilelor. De exemplu:
/ * Declarație * / @var primary_color culoare roșie; / * Utilizare * / corp culoare: var (primary_color);
Accentsconagua
@var culoare cuvânt cheie din codul de mai sus. var funcția și treceți în numele variabilei. Trebuie să recunosc: pare puțin redundant să se folosească @var directivă. Sintaxa pe care o folosesc SASS și mai puțin pare mai potrivită și mai curată. @myVar este mai succint decât @var myVar.
Tipurile de variabile sunt un plus de bun venit, pe de altă parte.
Variabilele sunt tipărite. Fiecare tip de valoare primitivă, fiecare proprietate și câteva tipuri de confort suplimentare există. Acest lucru ne permite să expunem noile chestiuni CSSOM pe ele:
document.styleSheets [0] .vars ['primary_color']. alfa = .5;
-- xanthir.com
Variabilele vor avea, de asemenea, capacitatea de a fi incluse într - o cutie de declarații, prin utilizarea @local directivă. Acest lucru poate fi util atunci când o variabilă trebuie utilizată doar o dată sau de două ori în cadrul unui proiect.
.cutie / * Declarație * / @local box_gradient fundal liniar-gradient (sus, negru, alb); / * Utilizare * / fundal: var (box_gradient);
Amestecurile pot fi utile. De fapt, am abordat procesul de creare a unui fișier de clasă de mix-uri nu cu mult timp în urmă pe Nettuts +. Puteți citi aici despre aceasta - deși rețineți că tehnicile prezentate în acest articol se bazează pe Preprocesorul mai puțin. Noile experimente, din nou, utilizează o sintaxă ușor diferită.
/ * Mai puțin * / .rachera de graniță (@radius: 3px) -webkit-border-radius: @radius; -moz-border-radius: @radius; raza de graniță: @radius; / * SASS * / @mixin raza de graniță (rază $: 3px) -webkit-border-radius: $ radius; -moz-border-radius: $ radius; raza razei: raza $; / * Și, eventual, soluția nativă? * / @mixin raza de margine (raza lungime 3px) -webkit-border-radius: var (raza); -moz-border-radius: var (rază); raza de graniță: var (rază);
Observați asemănările dintre SASS și soluția nativă propusă pentru amestecuri. Acest lucru se datorează faptului că membrii echipei SASS servesc drept consilieri.
Așa cum ați putea ști, mai puțin și SASS vă permit cuib selectoare. Acest lucru poate reduce drastic dimensiunea foilor de stil, deoarece elimină necesitatea de a repeta același selector.
/ * Modul curent * / #content ... #content p ... #content pa ... #content pa: hover ... / * Mai puțin și SASS * / #content ... p ... a : hover ... / * Si nativ? * / #content ... @ acest> p ... @ acest> a ... @this: hover ...
În timp ce sintaxa propusă este mai mult prolix, pentru a-și face credit, are o sintaxă frumoasă, asemănătoare OO, care va face pe mulți dezvoltatori să se simtă ca acasă.
Dar amintiți - nu toți designerii sunt dezvoltatori.
În mod implicit, în Mai puțin, toate variabilele sunt - pentru toate intențiile și scopurile - globale. Ca rezultat, devine dificil să distribuim codul, deoarece numele de variabile existente pot fi supra-scrise. Soluția nativă potențială va fi implementarea modulelor sau a spațiilor de nume. Atunci pot fi inclus într - un bloc adăugând @utilizare directivă.
@module Site @var primary_color color # 292929; @var secundar culoarea albastru; @mixin raza de graniță (raza de lungime 3px) ... border-radius: 3px; / * Utilizarea incorectă * / body color: var (primary_color); // Numele variabilei este nedefinit / * Correct * / body @use Site; culoarea: var (primary_color); // # 292929 (Lucrări)
După cum sa menționat la începutul acestui articol, documentația menționată mai sus se află încă în stadiile experimentale. Este posibil - chiar probabil - că sintaxa se va schimba, pe baza ta parere. Așa că hai să o avem. Are ideea de variabile native în mix-uri în CSS-ul tău te excită ... sau te sperie?
Pe mine? Ei bine, eu sunt pentru asta. Cred că sintaxa propusă ar putea folosi un pic de muncă, deoarece fără îndoială va sperie designerii printre noi. Acestea fiind spuse, dacă sintaxa a fost simplificată puțin, sunt 100% la bord. Tu ce mai faci?
