Share
Folosind preprocesoare precum Sass, LESS și Stylus, dezvoltatorii au dat întotdeauna mai mult control asupra foilor de stil, dar CSS nativ încetează treptat decalajul. Caracteristicile CSS, cum ar fi variabilele, calc și amestecuri sunt doar vârful aisbergului; să vedem ce preprocesoare ne ajută în prezent și cum logica CSS nativă va schimba modul în care facem lucrurile.
Grafic de la Brother Typeface pe Envato ElementsAbilitățile de limbă precum Sass, LESS și Stylus au explodat lumile dezvoltatorilor, oferindu-le variabile, mixuri, funcții, extinde și multe altele. Aceste preprocesoare au completat caracteristicile lipsă pe care CSS nu le-a putut oferi.
Cu toate acestea, CSS nu ar trebui să mai fie considerat "fără logică" fără prezența intelectului. Cu CSS în mișcare pentru a se perfecționa, noi deja atragem atenția asupra viitorului - un viitor care va concura cu preprocesorii.
De obicei, asociază "mixurile" cu preprocesoarele, grupuri de declarații CSS pe care le puteți reutiliza pe parcursul unui proiect. Un amestec poate fi folosit ca ajutor independent, sau puteți trece valori ca argumente pentru a-l face mai flexibil.
Iată un Sass @mixin exemplu numit marimea fontului.
@mixin font-size ($ size, $ base) font-size: $ size; // backback pentru browserele vechi font-size: ($ size / $ base) * 1rem;
Mixinul de mai sus va accepta argumente pentru dimensiune $ și $ bază, și este folosit într-un @include declarație cu capacitatea de a ajusta argumentele în funcție de context.
/ * Apel Sass * / corp @ include font-size (14, 16); / * Ieșire CSS * / body font-size: 14px; dimensiune font: 0.875rem;
Rezultatul este a rem valoarea bazată pe marimea fontului cu px înapoi pentru browserele care nu acceptă rem. Procesoarele de procesare ca aceasta au salvat dezvoltatorii nenumărate ore de-a lungul anilor.
Combinările CSS native sunt în prezent un proiect de editori, dar au și o implementare de lucru în Chrome. Dacă ați jucat deja cu variabile CSS, fragmentul următor va arăta destul de familiar.
: rădăcină --pink-theme: background: # F64778;
Feriți-vă că codul de mai sus va face cel mai sigur apariția sondajului dvs. de sintaxă. Acest mod de a scrie un mixer CSS folosește o nouă regulă la-numită @aplica, similar cu ceea ce știm în Sass ca @include.
corp @apply -pink-theme;
Așa cum suntem familiarizați cu utilizarea lui Sass @include, am putea avea în cele din urmă @aplica pentru CSS!
Puteți încerca experimentul în sine în Chrome, prin activarea unui stegaj sub chrome: // flags / # enable-experimentale-web-platformă caracteristici.
Amintiți-vă când preprocesorii au fost singurele unelte de stil capabile de gimnastică matematică? Ei bine, nu mai este cazul. Cu calc (), putem să luăm numerele astea plictisitoare și să le mutăm în valori noi bazate pe aritmetica dorită.
nav margine: calc (1rem - 2px) calc (1rem - 1px);
Aceasta este frumusețea lui calc (); în cele din urmă se extinde puterile CSS în stratosfera. Preferați adăugarea? Scădere? Divizia? Multiplicare? Calc se poate ocupa de toate acestea și mai mult.
Dacă doriți să citiți mai multe despre calc (), spec. W3C are tot ce aveți nevoie pentru a vă face atât de somnolenți și fericiți în același timp. Suportul pentru browser este, de asemenea, solid, în funcție de modul în care pot fi utilizate.
Variabilele native pentru CSS sunt în sfârșit aici. Sunt o opțiune reală și tangibilă pentru dezvoltatori, deși a fost nevoie de ceva timp pentru a învăța de la preprocesori.
Iată ce arată sintaxa variabilă Sass:
$ spațiu-unitate: 20px; principal margine: $ spațiere-unitate; padding: unitatea de spațiere $;
Variabilele Sass sunt notate cu un dolar $ semn, dar în CSS ele par un pic diferit:
: rădăcină - primar-culoare: albastru; nav.primary fundal: var (- primar-culoare);
Variabilele CSS sunt notate cu o cratimă dublă -- și sunt de obicei plasate în interior :rădăcină pentru accesul la nivel global, deși domeniul lor de aplicare poate fi sporit prin plasarea acestora în declarații selective specifice.
div culoare: var (- my-var, roșu);
Variabilele pot chiar accepta o valoare de rezervă dacă nu sunt încă definite, așa cum este cazul exemplului de mai sus. De asemenea, suportul pentru browser nu este rău, iar Edge prezintă sprijin parțial. Specificația este, de asemenea, în faza de recomandare a candidatului pentru plăcerea dvs. de lectură.
Nesting este o caracteristică în multe preprocesoare care vă permite să plasați selectori interior o declarație existentă. De obicei, cuiburile în Sass arată cam așa:
ul margine: 20 pixeli automat; li font-size: 12px; a text-decoration: none;
Nesting-ul poate deveni greoi și vă poate lăsa înfășurat într-o mulțime de necazuri, rezultând lanțuri de selecție imposibil de lungi. Din acest motiv, este recomandabil să rămânem la regula de început și să păstrăm cuiburile la maximum trei sau patru nivele adânci.
În timp ce cuiburile pot fi periculoase, pot fi de asemenea la îndemână dacă aveți timp să fiți atenți. Iată o scurtă privire în modul în care ar putea căuta în cele din urmă CSS nativ:
/ * CSS Nesting * / nav culoare: # 222; & primar fundal: maro; / * Rezultat * / nav culoare: # 222; nav.primary fundal: maro;
Așa cum suntem obișnuiți cu aliații noștri preprocesori, cuiburile CSS native ne împovărează aceleași principii, dar fără a fi nevoie să compilam limba. Există un proiect de spec. De către Tab Atkins cu această caracteristică pentru cuiburile CSS Native.
"Extinde" reprezintă o altă modalitate de a transmite proprietățile și valorile în jur, împărțind-le între declarații. În Sass, ne-am obișnuit să aplicăm următoarea sintaxă:
.mesaj border: 1px solid #ccc; padding: 10px; culoare: # 333; .success @extend .message; culoarea frontală: verde; .error @extend .message; culoare-limită: roșie; .warning @extend .message; culoarea frontală: galbenă;
Puteți vedea că începem prin definirea de stiluri pentru .mesaj, și apoi oferă trei variante cu diferite frontieră-culori. Fiecare varianta este prima extinde .mesaj, moștenind astfel toate regulile de stil, înainte de a schimba culoarea frontală.
Sintaxa identică cu exemplul de mai sus este ceea ce este elaborat de Tab Atkins ca o altă specificație potențială pentru CSS nativ. Indiferent dacă sunteți de acord sau nu cu extensiile (o caracteristică a cărei beneficii sunt dezbătute în mod fierbinte), este minunat să văd că îngrijitorii CSS îmbrățișează ideile date de preprocesori.
Dacă vă aflați vreodată folosind funcții de manipulare a culorilor preprocesor, veți aprecia această funcție în CSS nativ. Funcția color-mod () are o culoare existentă și aplică zero sau mai multe "regulatoare de culoare" care specifică modul de manipulare a rezultatului final.
nav fundal: color-mod (# 79d3e2 hue (360) saturație (100%));
Dezvoltarea este în stadiile incipiente, iar în timp ce există polifluze disponibile, sintaxa se schimbă frecvent (actuala culoare-mod obișnuia să fie culoare, de exemplu).
Tyler Gaw a făcut un instrument cu adevărat curat (colorme.io), care vă permite să experimentați toate posibilitățile de reglare a culorilor disponibile.
colorme.ioFuncția Spec pentru funcția color-mod () este în prezent în modul de proiectare prin intermediul grupului de lucru CSS.
În același mod în care jQuery a ajutat la îmbunătățirea web-ului, așa că există și preprocesoare când vine vorba despre CSS. Limbi precum Sass au ajutat la deschiderea unor noi idei și abordări care nu au fost încă luate în considerare de autorii spec.
Sper că noile caracteristici despre care am vorbit vor inspira să le folosiți în propria voastră muncă; Vă încurajez să luați în considerare utilizarea funcționalității native a unui preprocesor ori de câte ori este posibil!
Accentsconagua