Share
Găsirea adevărată putere a unui preprocesor CSS este o aventură. Există nenumărate limbi, sintaxe și funcții, toate gata pentru utilizare chiar acum.
În acest articol, vom acoperi diversele caracteristici și avantaje ale utilizării a trei preprocesoare diferite - Sass, LESS și Stylus.
Preprocesoarele produc CSS care funcționează în toate browserele.
Preprocesoarele CSS3 sunt limbi scrise cu scopul exclusiv de a adăuga funcții cool, inventive la CSS fără a rupe compatibilitatea browser-ului. Ei fac acest lucru prin compilarea codului pe care îl scriem în CSS obișnuit care poate fi folosit în orice browser până în epoca de piatră. Există mii de trăsături pe care preprocesorii le aduc la masă, iar în acest articol vom acoperi câteva dintre cele publicate și unele dintre cele mai puțin cunoscute. Să începem.
Cea mai importantă parte din scrierea codului într-un preprocesor CSS este înțelegerea sintaxei. Din fericire pentru noi, sintaxa este (sau poate fi) identică cu cea obișnuită CSS pentru toți cei trei preprocesori.
Sass și mai puțin folosesc sintaxa CSS standard. Acest lucru face extrem de ușor să convertiți un fișier CSS existent fie la un preprocesor. Sass utilizează .SCSS extensia de fișiere și LESS folosesc .Mai puțin extensie. Fișierul de bază Sass sau LESS poate fi setat ca mai jos:
/ * stil.scss sau stil.less * / h1 culoare: # 0982C1;
După cum probabil ați observat, acesta este doar un CSS regulat, care se compune perfect atât în Sass, cât și în LESS.
Este important să rețineți că Sass are, de asemenea, o sintaxă mai veche, care omite punct și virgulă și paranteze curbate. Deși acest lucru este încă în jur, este vechi și nu o vom folosi după acest exemplu. Sintaxa utilizează .Sass extensie de fișier și arată astfel:
/ * style.sass * / h1 culoare: # 0982c1
Sintaxa pentru Stylus este mult mai detaliată. Utilizarea .Styl extinderea fișierului, Stylus acceptă sintaxa standard CSS, dar acceptă și alte variante în care parantezele, coloanele și semi-colonii sunt toate opționale. De exemplu:
/ * stil.styl * / h1 culoare: # 0982C1; / * omite paranteze * / h1 culoare: # 0982C1; / * omiteți colonii și semi-colonii * / h1 color # 0982C1
Utilizarea diferitelor variante în aceeași foaie de stil este de asemenea validă, astfel încât următoarele se vor compila fără erori.
h1 culoare # 0982c1 h2 dimensiune font: 1.2m
Variabilele pot fi declarate și utilizate în întreaga foaie de stil. Aceștia pot avea orice valoare care este o valoare CSS (de exemplu, culori, numere [unități incluse] sau text.) Și pot fi menționate oriunde în întreaga foaie de stil.
Variabilele Sass sunt prefixate cu $ simbolul și valoarea și numele sunt separate cu un punct și virgulă, la fel ca o proprietate CSS.
$ mainColor: # 0982c1; $ siteWidth: 1024px; $ borderStyle: punctat; corp culoare: $ mainColor; frontieră: 1px $ borderStyle $ mainColor; maximă-lățime: $ siteWidth;
Mai puține variabile sunt exact aceleași ca variabilele Sass, cu excepția faptului că numele variabilelor sunt prefixate cu @ simbol.
@mainColor: # 0982c1; @siteWidth: 1024px; @borderStyle: punctat; corp culoare: @mainColor; frontieră: 1px @borderStyle @mainColor; max-width: @siteWidth;
Variabilele de stil nu necesită nimic pentru a fi prependate la ele, deși permite $ simbol. Ca întotdeauna, punctajul de sfârșit nu este necesar, dar un semn egal între valoare și variabilă este. Un lucru de observat este faptul că Stylus (0.22.4) se compilează dacă prefixăm @ simbol la un nume de variabilă, dar nu va aplica valoarea când se face referință. Cu alte cuvinte, nu face asta.
mainColor = # 0982c1 siteWidth = 1024px $ borderStyle = culoarea corpului punctat mainColor border 1px $ borderStyle mainColor max-width siteWidth
Fiecare dintre fișierele de mai sus se va compila la același CSS. Puteți utiliza imaginația dvs. pentru a vedea cât de utile sunt variabilele. Nu vom mai trebui să schimbăm o singură culoare și trebuie să o reintroducem de douăzeci de ori, sau doriți să schimbați lățimea site-ului și trebuie să vă săturați pentru ao găsi. Iată CSS după compilare:
corp culoare: # 0982c1; frontieră: 1px punctat # 0982c1; max-lățime: 1024px;
Dacă trebuie să menționăm mai multe elemente cu același părinte în CSS, poate fi greu să continuăm să scriem părintele mereu.
secțiunea marja: 10px; secțiunea nav height: 25px; secțiunea nav a color: # 0982C1; secțiunea nav: a se deplasa text-decoration: underline;
În schimb, folosind un preprocesor, putem scrie selectorii pentru copii în parantezele părintelui. De asemenea & simbolul se referă la selectorul părinte.
Toate cele trei preprocesoare au aceeași sintaxă pentru selecționarea selectorilor.
secțiunea marja: 10px; nav height: 25px; a culoare: # 0982C1; &: hover text-decorare: subliniere;
Acesta este codul CSS compilat din codul de mai sus. Este exact la fel ca atunci când am început - cât de convenabil!
secțiunea marja: 10px; secțiunea nav height: 25px; secțiunea nav a color: # 0982C1; secțiunea nav: a se deplasa text-decoration: underline;
Amestecurile sunt funcții care permit reutilizarea proprietăților în întreaga foaie de stil. Mai degrabă decât să trebuiască să mergem în stilul nostru de stil și să schimbăm o proprietate de mai multe ori, putem să o schimbăm doar în interiorul mixinului nostru. Acest lucru poate fi foarte util pentru stilul specific al elementelor și prefixelor furnizorilor. Atunci când amestecurile sunt chemați dintr-un selector CSS, argumentele mixin sunt recunoscute și stilurile din mixin sunt aplicate selectorului.
/ * Sass mixin eroare cu (opțional) argument $ borderWidth care implicit la 2px dacă nu este specificat * / @ mixin eroare ($ borderWidth: 2px) graniță: $ borderWidth solid # F00; culoare: # F00; . eroare generală padding: 20px; margine: 4px; @ include error (); / * Aplică stiluri din eroare mixin * / .login-error left: 12px; poziția: absolută; top: 20px; @ include eroare (5px); / * Se aplică stiluri din eroare mixin cu argument $ borderWidth egal cu 5px * /
/ * Mai puțin eroare mixin cu argumentul (opțional) @borderWidth care implicit este de 2px dacă nu este specificat * / .error (@borderWidth: 2px) border: @borderWidth solid # F00; culoare: # F00; . eroare generală padding: 20px; margine: 4px; .eroare(); / * Aplică stiluri din eroare mixin * / .login-error left: 12px; poziția: absolută; top: 20px; .error (5px); / * Aplică stiluri din eroarea mixin cu argumentul @borderWidth egal cu 5px * /
/ * Eroare de mixare a stylus-ului cu (opțional) argumentul borderWidth care implicit la 2px dacă nu este specificat * / eroare (borderWidth = 2px) border: borderWidth solid # F00; culoare: # F00; . eroare generală padding: 20px; margine: 4px; eroare(); / * Aplică stiluri din eroare mixin * / .login-error left: 12px; poziția: absolută; top: 20px; eroare (5px); / * Aplică stiluri din eroarea mixin cu argumentul borderWidth egal cu 5px * /
Toate preprocesoarele se compilesc la același cod de mai jos:
.eroare generică padding: 20px; margine: 4px; frontieră: 2px solid # f00; culoare: # f00; .login-error stânga: 12px; poziția: absolută; top: 20px; frontieră: 5px solid # f00; culoare: # f00;
Când scriem CSS în mod vechi, am putea folosi următorul cod pentru a aplica aceleași stiluri simultan mai multor elemente:
p, ul, ol / * stilurile aici * /
Asta functioneaza minunat, dar daca avem nevoie de stilul suplimentar al elementelor in mod individual, trebuie sa fie creat un alt selector pentru fiecare si poate deveni mai rapid si mai greu de intretinut. Pentru a contracara acest lucru, moștenirea poate fi utilizată. Moștenirea este capacitatea altor selectori CSS de a moșteni proprietățile unui alt selector.
.bloc margine: 10px 5px; padding: 2px; p @extend .block; / * Moștenirea stilurilor din ".block" * / border: 1px solid #EEE; ul, ol @extend .block; / * Moștenirea stilurilor din ".block" * / color: # 333; text-transform: majuscule;
.bloc, p, ul, ol margine: 10px 5px; padding: 2px; p frontieră: 1px solid #EEE; ul, ol culoare: # 333; text-transform: majuscule;
Mai puțin nu suportă cu adevărat moștenirea unor stiluri precum Sass și Stylus. În loc să adauge mai mulți selectori la un set de proprietăți, acesta tratează moștenirea ca un amestec fără argumente și importă stilurile în selectorii proprii. Dezavantajul este că proprietățile se repetă în foaia de stil compilată. Iată cum l-ați seta:
.bloc margine: 10px 5px; padding: 2px; p .block; / * Moștenirea stilurilor din ".block" * / border: 1px solid #EEE; ul, ol .block; / * Moștenirea stilurilor din ".block" * / color: # 333; text-transform: majuscule;
.bloc margine: 10px 5px; padding: 2px; p (margine: 10px 5px; padding: 2px; frontieră: 1px solid #EEE; ul, ol margine: 10px 5px; padding: 2px; culoare: # 333; text-transform: majuscule;
După cum puteți vedea, stilurile de la .bloc au fost introduse în selectorii pe care vrem să le oferim moștenirii. Este important să rețineți că prioritatea poate deveni o problemă aici, deci fiți precauți.
În comunitatea CSS, importarea CSS este încruntată deoarece necesită mai multe solicitări HTTP. Cu toate acestea, importul cu un preprocesor funcționează diferit. Dacă importați un fișier din oricare dintre cele trei preprocesoare, va fi literalmente include importul în timpul compilării, creând un singur fișier. Țineți minte, deși importați regulat .css fișierele se compilează cu valorile implicite @import "file.css"; cod. De asemenea, amestecurile și variabilele pot fi importate și utilizate în foaia de stil principală. Importul face ca crearea fișierelor separate pentru organizație să fie foarte utilă.
/ * fișier. type * / body background: #EEE;
@import "reset.css"; @import ". type"; p fundal: # 0982C1;
@import "reset.css"; corp background: #EEE; p background: # 0982C1;
Funcțiile de culoare sunt construite în funcții care vor transforma o culoare după compilare. Acest lucru poate fi extrem de util pentru crearea de gradienți, culori mai întunecate și mult mai mult.
lumina (culoare $, 10%); / * returnează o culoare cu 10% mai ușoară decât $ color * / darken ($ color, 10%); / * returneaza o culoare cu 10% mai inchisa decat $ color * / saturate ($ color, 10%); / * returnează o culoare cu 10% mai saturată decât $ color * / desaturate ($ color, 10%); / * returnează o culoare cu 10% mai puțin saturate decât $ color * / tonuri de gri ($ color); / * returnează tonurile de gri din $ color * / complement ($ color); / * returnează culoarea completă a culorii $ * / invert ($ color); / * returnează culoarea inversată a culorii $ * / mix ($ color1, $ color2, 50%); / * mix $ color1 cu $ color2 cu o greutate de 50% * /
Aceasta este doar o scurtă listă a funcțiilor de culoare disponibile în Sass, o listă completă a funcțiilor de culoare Sass disponibile poate fi găsită citirea documentației Sass.
Funcțiile de culoare pot fi utilizate oriunde o culoare este validă CSS. Iată un exemplu:
$ culoare: # 0982C1; h1 fundal: $ color; graniță: 3 pixeli de culoare închisă ($ culoare, 50%);
lumina (@color, 10%); / * returnează o culoare cu 10% mai ușoară decât @color * / darken (@color, 10%); / * returnează o culoare cu 10% mai închisă decât @color * / saturate (@color, 10%); / * returnează o culoare cu 10% mai saturată decât @color * / desaturate (@color, 10%); / * returnează o culoare cu 10% mai puțin saturată decât @color * / spin (@color, 10); / * returnează o culoare cu un grad de nuanță mai mare de 10 grade decât @color * / spin (@color, -10); / * returnează o culoare cu o nuanță de 10 grade mai mică decât @color * / mix (@ color1, @ color2); / * returneaza un amestec de @ color1 si @ color2 * /
O listă a tuturor funcțiilor LESS poate fi găsită prin citirea documentației LESS.
Iată un exemplu de utilizare a unei funcții de culoare în LESS:
@color: # 0982C1; h1 fundal: @color; graniță: 3px de culoare închisă (@color, 50%);
lumina (culoare, 10%); / * returnează o culoare cu 10% mai ușoară decât 'color' * / darken (culoare, 10%); / * returneaza o culoare cu 10% mai inchisa decat "color" * / saturate (culoare, 10%); / * returnează o culoare cu 10% mai saturată decât "color" * / desaturate (culoare, 10%); / * returnează o culoare cu 10% mai puțin saturate decât "culoare" * /
O listă completă a tuturor funcțiilor de culoare Stylus poate fi găsită prin citirea documentației Stylus.
Iată un exemplu folosind funcțiile de culoare Stylus:
color = # 0982C1 h1 culoarea de fundal de fundal 3px solid darken (culoare, 50%)
Făcând matematică în CSS este destul de utilă și acum este pe deplin posibilă. Este simplu și așa se face:
corp marja: (14px / 2); top: 50px + 100px; dreapta: 100px - 50px; stânga: 10 * 10;
Am acoperit o mulțime de caracteristici și lucruri noi pe care preprocesorii le pot face, dar nu am acoperit nimic practic sau practic. Iată o scurtă listă de aplicații din lumea reală, în care utilizarea unui preprocesor este un economizor de viață.
Acesta este unul dintre motivele pentru a folosi un preprocesor și pentru un motiv foarte bun - economisește mult timp și lacrimi. Crearea unui mixin pentru a gestiona prefixele furnizorului este ușor și salvează o mulțime de repetări și editare dureroasă. Iată cum se face:
@mixin border-radius (valori $) -webkit-border-radius: $ values; -moz-border-radius: $ values; raza de graniță: valori $; div @ include raza de graniță (10px);
.raza de graniță (@values) -webkit-border-radius: @values; -moz-border-radius: @values; raza de graniță: @values; div .border-raza (10px);
raza de graniță (valori) -webkit-border-radius: values; -moz-border-radius: values; raza de graniță: valori; div limită-rază (10px);
div -webkit-border-radius: 10px; -moz-border-radius: 10px; raza de graniță: 10 pixeli;
Copierea textului 3D folosind multiple Text-umbre este o idee inteligentă. Singura problemă este că schimbarea culorii după fapt este dificilă și greoaie. Folosind mixuri și funcții de culoare, putem crea text 3D și schimba culoarea în zbor!
@mixin text3d ($ culoare) culoare: $ culoare; ($ color, 10%), 3px 3px 0px (culoare, 15%), 4px 4px 0px culoare închisă ($ color, 20%), ), 4px 4px 2px # 000; h1 font-size: 32pt; @ include text3d (# 0982c1);
.text3d (@color) culoare: @color; text-umbre: 1px 1px 0px întunecată (@color, 5%), 2px 2px 0px întunecată (@color, 10%), 3px 3px 0px întunecată (@color, 15% ), 4px 4px 2px # 000; span font-size: 32pt; .text3d (# 0982c1);
textul color (color): culoarea textului-shadow: 1px 1px 0px culoarea (culoarea, 5%), 2px 2px 0px culoarea închisă (culoarea, 10%), 3px 3px 0px , 20%), 4px 4px 2px # 000 dimensiunea fontului span: 32pt text3d (# 0982c1)
Am ales să scriu Stylus-ul Text-umbre pe o linie pentru că am omis parantezele curbate.
span font-size: 32pt; culoare: # 0982c1; text-shadow: 1px 1px 0px # 097bb7, 2px 2px 0px # 0875ae, 3px 3px 0px # 086fa4, 4px 4px 0px # 07689a, 4px 4px 2px # 000;
Utilizarea operațiunilor cu numere și a variabilelor pentru coloane este o idee pe care am venit-o când am jucat pentru prima dată cu preprocesoarele CSS. Prin declararea unei lățimi dorite într-o variabilă, o putem schimba cu ușurință pe drum, fără nici un fel de matematică. Iată cum sa procedat:
$ siteWidth: 1024px; $ gutterWidth: 20px; $ sidebarWidth: 300px; corp marja: 0 auto; lățime: $ siteWidth; .content float: left; lățime: $ siteWidth - ($ sidebarWidth + $ gutterWidth); sidebar float: left; margin-stânga: $ gutterWidth; lățime: $ sidebarWidth;
@siteWidth: 1024px; @ gutterWidth: 20px; @sidebarWidth: 300px; corp marja: 0 auto; width: @siteWidth; .content float: left; lățime: @siteWidth - (@ sidebarWidth + @ gutterWidth); sidebar float: left; margin-stânga: @gutterWidth; width: @sidebarWidth;
siteWidth = 1024px; gutterWidth = 20px; sidebarWidth = 300px; corp marja: 0 auto; lățime: siteWidth; .content float: left; lățime: siteWidth - (lateralWidth + gutterWidth); sidebar float: left; marginea-stânga: gura Lățime; lățime: bara lateralăWidth;
corp marja: 0 auto; lățime: 1024px; .content float: left; lățime: 704px; sidebar float: left; margin-stânga: 20px; lățime: 300px;
Există destul de multe ciudățenii pentru utilizarea unui preprocesor CSS. Voi trece peste câteva dintre cele mai distractive, dar dacă sunteți cu adevărat interesat să găsiți totul, vă recomand să scrii documentația sau, mai bine, să începeți să utilizați un preprocesor în codarea zilnică.
Dacă ați scris CSS pentru orice perioadă decentă, sunt sigur că ați ajuns la un punct în care ați avut o eroare undeva și pur și simplu nu l-ați găsit. Dacă ești ca mine, probabil că ai petrecut după-amiaza tragând părul afară și comentând diverse lucruri pentru a vâna eroarea în jos.
Preprocesoarele CSS raportează erori. Este atât de simplu. Dacă este ceva în neregulă cu codul vostru, vă spun unde și dacă aveți noroc: de ce. Puteți consulta această postare de blog dacă sunteți interesat să vedeți cum sunt raportate erorile în diferite preprocesoare.
Atunci când se compilează cu un preprocesor CSS, orice comentariu dublu-slash este eliminat (de ex. //cometariu) și orice comentariu cu slash-asterisc rămâne (de ex. /* cometariu */). Acestea fiind spuse, utilizați dublu-slash pentru comentariile pe care le doriți pe partea necompilată și cu slash-asterisc pentru comentarii pe care doriți să le vedeți după compilație.
Doar o notă: dacă compilați minificate, toate comentariile sunt eliminate.
Fiecare preprocesor CSS pe care l-am acoperit (Sass, LESS și Stylus) are propriul său mod unic de a realiza aceeași sarcină, oferindu-i dezvoltatorilor posibilitatea de a utiliza caracteristici utile, neacceptate, păstrând în același timp compatibilitatea cu browserul și curățenia codului.
Deși nu este o cerință pentru dezvoltare, preprocesorii pot economisi mult timp și pot avea câteva caracteristici foarte utile.
Vă încurajez pe toți să încercați cât mai mulți preprocesori cu putință, astfel încât să puteți alege în mod eficient un favorit și să știți de ce este favorizat față de numeroși alții. Dacă nu ați încercat încă să utilizați un preprocesor pentru a scrie CSS, vă recomand să încercați.
Aveți o caracteristică preferată de preprocesor CSS pe care nu am menționat-o? Există ceva ce se poate face altul nu poate? Spuneți-ne în comentariile de mai jos!
O mulțumire deosebită pentru Karissa Smith, un prieten super-talentat al meu care a creat miniaturile de previzualizare pentru acest articol.
Accentsconagua