Valorificarea adevăratei puteri a preprocesorului CSS este o aventură. Există nenumărate limbi, sintaxe și funcții, toate gata de utilizare chiar acum.

În acest articol, ne vom uita la diferitele caracteristici și beneficii ale utilizării a trei preprocesoare diferite: Sass, LESS și Stylus.

Preprocesoarele CSS3 sunt limbi scrise doar cu scopul de a adăuga caracteristici interesante și inventive la CSS fără a întrerupe compatibilitatea browserului. Ei fac acest lucru prin compilarea codului pe care îl scriem în CSS simplu, care poate fi folosit în orice browser din epoca de piatră. Există mii de caracteristici pe care preprocesoarele le aduc la masă, iar în acest articol ne vom uita la unele dintre cele publicate și unele dintre cele nepublicate. Să începem.

Cea mai importantă parte a scrierii codului într-un preprocesor CSS este înțelegerea sintaxei. Din fericire pentru noi, sintaxa este (sau poate fi) identică cu CSS obișnuit pentru toate cele trei preprocesoare.

Sass și LESS folosesc sintaxa standard CSS. Acest lucru facilitează conversia unui fișier CSS existent într-un preprocesor. Sass folosește extensia .scss și LESS folosește extensia .less. Un fișier de bază Sass sau LESS poate fi configurat astfel:

/* style.scss sau style.less */
h1 (
culoare: #0982C1;
}

După cum probabil ați observat, acesta este doar un CSS simplu care se compilează bine atât în ​​Sass, cât și în LESS.

Este important de reținut că Sass are și o sintaxă mai veche care omite punctele și virgulă și acolade. Deși acesta este încă în prezent, este depreciat și nu îl vom folosi în acest exemplu. Sintaxa folosește extensia .sass și arată astfel:

/* style.sass */
h1
culoare: #0982c1

Sintaxa pentru Stylus este mult mai verbosă. Folosind extensia de fișier .styl, Stylus acceptă sintaxa standard CSS, dar acceptă și alte variante în care parantezele, punctele și punctele și punctele sunt opționale. De exemplu:

/* stil.stil */
h1 (
culoare: #0982C1;
}
/* omite paranteze */
h1
culoare: #0982C1;
/* omite două puncte și punct și virgulă */
h1
culoare #0982C1

Utilizarea diferitelor variații în cadrul aceleiași foi de stil este, de asemenea, acceptabilă, astfel încât următoarele se vor compila fără erori.

H1 (
culoare #0982c1
}
h2
dimensiunea fontului: 1.2em

Variabilele pot fi declarate și utilizate în toată foaia de stil. Ele pot avea orice semnificație, adică Valoarea CSS(cum ar fi culorile, numerele [unități incluse] sau text.) și pot fi referite peste tot în foaia noastră de stil.

Variabilele Sass sunt adăugate cu un caracter $, iar valoarea și numele sunt separate prin punct și virgulă, la fel ca o proprietate CSS.

$mainColor: #0982c1;
$siteWidth: 1024px;
$borderStyle: punctat;
corp(
culoare: $mainColor;
chenar: 1px $borderStyle $mainColor;
max-width: $siteWidth;
}

Variabilele LESS sunt exact aceleași cu variabilele Sass, cu excepția ca numele variabilelor sunt atașate cu simbolul @.

@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: punctat;
corp(
culoare: @mainColor;
chenar: 1px @borderStyle @mainColor;
max-width: @siteWidth;
}

Variabilele stylus nu necesită atașare pentru ele, deși permite utilizarea simbolului $. Ca întotdeauna, punctul și virgulă de sfârșit nu este necesar, dar există un semn egal între valoare și variabilă. Trebuie remarcat faptul că Stylus (0.22.4) se compilează dacă adăugăm un simbol @ la numele variabilei, dar nu aplicăm valoarea atunci când facem referințe. Cu alte cuvinte, nu o face.

MainColor = #0982c1
siteWidth = 1024px
$borderStyle = punctat
corp
culoare mainColor
chenar 1px $borderStyle mainColor
lățime maximă siteWidth

Fiecare dintre fișierele de mai sus va fi compilat cu același CSS. Vă puteți folosi imaginația pentru a vedea cât de utile sunt variabilele. Nu va mai fi nevoie să schimbăm o culoare și să o repetăm ​​de douăzeci de ori sau să vrem să schimbăm lățimea site-ului nostru și să căutăm în jur pentru a-l găsi. Iată CSS-ul după compilare:

Corp (
culoare: #0982c1;
chenar: 1px punctat #0982c1;
lățime maximă: 1024px;
}

Dacă trebuie să facem referire la mai multe elemente cu același părinte în CSS-ul nostru, poate fi plictisitor să continuăm să scriem părintele din nou și din nou.

Secțiune (
marja: 10px;
}
secțiunea de navigare (
înălțime: 25px;
}
secțiunea nav a (
culoare: #0982C1;
}
secțiunea nav a:hover (
text-decor: subliniere;
}

În schimb, folosind un preprocesor, putem scrie selectorii copii în parantezele părintelui. În plus, & indică selectorul părinte.

Toate cele trei preprocesoare au aceeași sintaxă pentru selectorii de imbricare.

Secțiune (
marja: 10px;
navigare(
înălțime: 25px;
a (
culoare: #0982C1;
&:hover (
text-decor: subliniere;
}
}
}
}

Acesta este CSS-ul compilat din codul de mai sus. Este exact la fel ca atunci când am început - cât de convenabil!

Secțiune (
marja: 10px;
}
secțiunea de navigare (
înălțime: 25px;
}
secțiunea nav a (
culoare: #0982C1;
}
secțiunea nav a:hover (
text-decor: subliniere;
}

Mixin-urile sunt funcții care ne permit să reutilizam proprietățile din foaia noastră de stil. În loc să parcurgem întreaga noastră foaie de stil și să schimbăm proprietatea de mai multe ori, acum o putem schimba pur și simplu în interiorul mixin-ului nostru. Acest lucru poate fi cu adevărat util pentru stilul de element specific și prefixele de furnizor. Când mixin-urile sunt apelate de la un selector CSS, argumentele mixin-ului sunt recunoscute și stilurile din mixin sunt aplicate selectorului.

Toate preprocesoarele compun același cod:

Eroare generică (
umplutură: 20px;
marginea: 4px;
chenar: 2px solid #f00;
culoare: #f00;
}
.login-error(
stânga: 12px;
poziție: absolută;
sus: 20px;
chenar: 5px solid #f00;
culoare: #f00;
}

Când scriem CSS în modul de modă veche, am putea folosi următorul cod pentru a aplica aceleași stiluri mai multor elemente în același timp:

P,
ul,
ol (
/* stiluri aici */
}

Acest lucru funcționează excelent, dar dacă trebuie să stilăm elementele în mod individual, trebuie creat un selector diferit pentru fiecare și poate deveni rapid mai dezordonat și mai dificil de întreținut. Pentru a contracara acest lucru, puteți folosi moștenirea. Moștenirea este capacitatea altora selectoare CSS moștenește proprietățile altui selector.

LESS nu acceptă cu adevărat moștenirea stilului precum Sass și Stylus. În loc să adauge mai mulți selectori la un singur set de proprietăți, tratează moștenirea ca pe un amestec fără argument și importă stiluri în propriii selectori. Dezavantajul este că proprietățile sunt repetate în foaia de stil compilată. Iată cum îl configurați:

Blocare (
marjă: 10px 5px;
umplutură: 2px;
}
p(
.bloc; /* Moștenește stiluri de la „.block” */
chenar: 1px solid #EEE;
}
ul, ol (
.bloc; /* Moștenește stiluri de la „.block” */
culoare: #333;
text-transform: majuscule;
}

După cum puteți vedea, stilurile din .block au fost inserate în selectoarele pe care am dori să le dăm moștenire. Este important să rețineți că prioritatea poate deveni o problemă aici, așa că aveți grijă.

În comunitatea CSS, importarea CSS este respinsă, deoarece necesită mai multe solicitări HTTP. Cu toate acestea, importul cu un preprocesor funcționează diferit. Dacă importați un fișier de la oricare dintre cei trei preprocesoare, acesta va include literalmente importul la momentul compilării, creând un singur fișier. Rețineți că importarea fișierelor .css obișnuite se compila cu @import „fișier.css” în mod implicit; cod. În plus, mixurile și variabilele pot fi importate și utilizate în foaia de stil principală. Importul face creație fişiere separate foarte util pentru organizatie.

Funcțiile de culoare sunt încorporate în funcții care convertesc culoarea în timpul compilării. Acest lucru poate fi extrem de util pentru a crea degrade, mai mult culori închiseîndrumări și multe altele.

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ă citind documentația Sass.

Funcțiile de culoare pot fi utilizate oriunde este folosită culoarea. Iată un exemplu:

$culoare: #0982C1;
h1 (
fundal: $culoare;
chenar: 3px întunecat solid ($culoare, 50%);
}

O listă cu toate funcțiile LESS poate fi găsită citind documentația LESS.

Iată un exemplu de utilizare a funcției de culoare în LESS:

@culoare: #0982C1;
h1 (
fundal: @culoare;
chenar: 3px întunecat solid(@color, 50%);
}

O listă completă a tuturor caracteristicilor de culoare Stylus poate fi găsită citind documentația Stylus.

Iată un exemplu de utilizare a caracteristicilor de culoare Stylus:

Culoare = #0982C1
h1
culoarea de fundal
chenar 3px solid se întunecă (culoare, 50%)

A face matematică în CSS este destul de util și acum este complet posibil. Este simplu și iată cum se face:

Am acoperit multe dintre funcțiile și noile capabilități pe care le pot face preprocesoarele, dar nu am acoperit nimic practic sau practic. Aici lista scurta aplicații din lumea reală în care utilizarea unui preprocesor este o salvare.

Acesta este unul dintre motivele pentru a utiliza un preprocesor și dintr-un motiv foarte bun - economisește mult timp și lacrimi. Crearea unui mixin pentru a gestiona prefixele furnizorului este ușoară și economisește o mulțime de repetări și editări dureroase. Iată cum să o faci:

Falsificarea textului 3D folosind mai multe umbre de text 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 putem schimba culoarea din mers!

Am decis să scriu umbrele textului Stylus pe o singură linie, deoarece am omis bretelele.

Folosirea operațiilor numerice și a variabilelor pe coloane este o idee pe care am întâlnit-o când m-am jucat prima dată cu preprocesoare CSS. Prin declararea lățimii dorite într-o variabilă, o putem schimba cu ușurință pe parcurs, fără nicio matematică mentală. Iată cum se face:

Există destul de multe ciudații în utilizarea unui preprocesor CSS. Voi enumera unele dintre cele distractive, dar dacă sunteți cu adevărat interesat să le găsiți pe toate, vă recomand să parcurgeți documentația sau, mai bine, să începeți să utilizați preprocesorul în codificarea zilnică.

Dacă ați scris CSS pentru un timp decent, sunt sigur că ați ajuns într-un punct în care ați greșit undeva și pur și simplu nu l-ați găsit. Dacă ești ca mine, probabil că ți-ai petrecut ziua trăgându-ți părul și comentând diverse lucruri pentru a vâna bug-ul.

Preprocesoarele CSS raportează erori. Este simplu. Dacă ceva nu este în regulă cu codul dvs., vă spune unde și, dacă aveți noroc: de ce. Puteți consulta această postare de blog dacă sunteți interesat să știți cum sunt raportate erorile în diferite preprocesoare.

Absolut toți designerii de layout cu experiență folosesc preprocesoare. Nu există excepții. Daca vrei sa reusesti in aceasta activitate, nu uita de aceste programe. La prima vedere, pot provoca groază liniștită la un începător - aceasta este prea asemănătoare cu programarea! De fapt, puteți înțelege toate capabilitățile preprocesoarelor CSS în aproximativ o zi, iar dacă încercați, atunci în câteva ore. Îți vor face viața mult mai ușoară în viitor.

Pentru a înțelege mai bine caracteristicile acestei tehnologii, să ne aruncăm pe scurt în istoria dezvoltării prezentării vizuale a paginilor web.

Când a început utilizarea în masă a Internetului, nu existau foi de stil. Executarea documentelor depindea exclusiv de browsere. Fiecare dintre ei avea propriile stiluri care au fost folosite pentru a gestiona anumite etichete. În consecință, paginile arătau diferit în funcție de browserul în care le-ați deschis. Rezultatul este haos, confuzie și probleme pentru dezvoltatori.

În 1994, omul de știință norvegian Haakon Lie a dezvoltat o foaie de stil care ar putea fi folosită pentru a proiecta aspect pagini separate de documentul HTML. Ideea a atras atenția reprezentanților consorțiului W3C, care au început imediat să o perfecționeze. Câțiva ani mai târziu, a fost lansată prima versiune a specificației CSS. Apoi a fost îmbunătățit și rafinat în mod constant... Dar conceptul a rămas același: fiecărui stil i se dau anumite proprietăți.

Utilizare Tabelele CSSîntotdeauna cauzată anumite probleme. De exemplu, designerii de layout au avut adesea dificultăți în sortarea și gruparea proprietăților și nu totul este atât de simplu cu moștenirea.

Și apoi au venit cele două miimi. Dezvoltatorii profesioniști front-end au început să se angajeze din ce în ce mai mult în markup, pentru care lucrul flexibil și dinamic cu stiluri era important. CSS-ul care exista la acel moment necesita suport pentru prefixare și urmărire pentru noile funcții ale browserului. Apoi experții JavaScript și Ruby s-au pus la treabă, creând preprocesoare - suplimente pentru CSS care îi adaugă noi funcții.

Ele îndeplinesc mai multe funcții:

• unificați prefixele browserului și hack-urile;

• simplificați sintaxa;

• face posibilă lucrul cu selectoare imbricate fără erori;

• îmbunătăți logica stilului.

Pe scurt: preprocesorul adaugă la Caracteristici CSS logica de programare. Acum, stylingul nu se realizează prin enumerarea obișnuită a stilurilor, ci prin utilizarea mai multor tehnici simpleși abordări: variabile, funcții, mixuri, bucle, condiții. În plus, a devenit posibilă utilizarea matematicii.

Văzând popularitatea unor astfel de suplimente, W3C a început să adauge treptat caracteristici din ele în codul CSS. De exemplu, așa a apărut funcția calc() în specificație, care este acceptată de multe browsere. Este de așteptat ca în curând să fie posibilă setarea variabilelor și crearea mixin-urilor. Cu toate acestea, acest lucru se va întâmpla în viitorul îndepărtat, iar preprocesoarele sunt deja aici și funcționează deja perfect.

Dezvoltat în 2007. Inițial a fost o componentă a Haml, un motor de șablon HTML. Noi opțiuni de management Elemente CSS Dezvoltatorilor Ruby on Rails le-a plăcut și au început să-l distribuie peste tot. A apărut în Sass cantitate uriașă caracteristici care sunt acum incluse în orice preprocesor: variabile, imbricarea selectoarelor, mixin-uri (la acea vreme, însă, era imposibil să le adăugați argumente).

Variabilele sunt declarate folosind semnul $. Puteți stoca proprietăți și seturile lor în ele, de exemplu: „$borderSolid: 1px solid red;”. În acest exemplu, am declarat o variabilă numită borderSolid și am stocat în ea valoarea 1px solid red. Acum, dacă în CSS trebuie să creăm un chenar roșu de 1px lățime, pur și simplu specificăm această variabilă după numele proprietății. Odată declarate, variabilele nu pot fi modificate. Sunt disponibile mai multe funcții încorporate. De exemplu, să declarăm o variabilă $redColor cu valoarea #FF5050. Acum, în codul CSS, în proprietățile unui element, îl folosim pentru a seta culoarea fontului: p ( culoare: $redColor; ). Vrei să experimentezi culoarea? Utilizați funcțiile de întunecare sau de iluminare. Acest lucru se face astfel: p ( culoare: întuneric($redColor, 20%); ). Ca rezultat, culoarea roșie va deveni cu 20% mai deschisă.

Anterior, pentru a indica cuibărirea, trebuia să folosești construcții lungi și incomode. Să ne imaginăm că avem un div care conține p și, la rândul său, conține un interval. Pentru div trebuie să setăm culoarea fontului la roșu, pentru p - galben, pentru span - roz. În CSS obișnuit, acest lucru s-ar face astfel:

Cu ajutorul unui preprocesor CSS, totul devine mai simplu și mai compact:

Elementele sunt literalmente „cuibări” una în alta.

Puteți importa fișiere folosind directiva @import. De exemplu, avem un fișier fonts.sass, care declară stiluri pentru fonturi. Îl includem în fișierul principal style.sass: @import ‘fonts’. Gata! În loc de unul dosar mare cu stiluri avem mai multe care pot fi folosite rapid și acces facil la proprietăţile cerute.

Una dintre cele mai interesante idei. Face posibilă setarea unui întreg set de proprietăți într-o singură linie. Ele funcționează după cum urmează:

@mixin largeFont (

font-family: „Times New Roman”;

dimensiunea fontului: 64px;

înălțimea liniei: 80px;

greutate font: bold;

Pentru a aplica un mixin unui element de pe pagină, utilizați directiva @include. De exemplu, vrem să-l aplicăm antetului h1. Rezultatul este următoarea construcție: h1 ( @include: largeFont; )

Toate proprietățile din mixin vor fi atribuite elementului h1.

Sintaxa Sass amintește de programare. Dacă sunteți în căutarea unei opțiuni care este mai potrivită pentru cei care învață CSS începători, consultați Mai puțin. A fost creat în 2009. Caracteristica principală- suport nativ, astfel încât să fie mai ușor pentru designerii de layout care nu sunt familiarizați cu programarea să o stăpânească.

Variabilele sunt declarate folosind simbolul @. De exemplu: @fontSize: 14px;. Nesting funcționează pe aceleași principii ca și în Sass. Mixinurile sunt declarate după cum urmează: .largeFont() ( familia de fonturi: „Times New Roman”; dimensiunea fontului: 64px; înălțimea liniei: 80px; greutatea fontului: bold; ). Pentru a vă conecta, nu trebuie să utilizați directive de preprocesor - doar adăugați un mixin proaspăt creat la proprietățile elementului selectat. De exemplu: h1 ( .largeFont; ).

Un alt preprocesor. Creat în 2011 de același autor care a oferit lumii Jade, Express și alte produse utile.

Variabilele pot fi declarate în două moduri - explicit sau implicit. De exemplu: font = 'Times New Roman'; - aceasta este o opțiune implicită. Dar $font = „Times New Roman” este explicit. Mixinele sunt declarate și incluse implicit. Sintaxa este: redColor() color red. Acum îl putem adăuga la element, de exemplu: h1 redColor();.

La prima vedere, Stylus poate părea confuz. Unde sunt parantezele și punctele „native”? Dar odată ce te scufunzi în ea, totul devine mult mai clar. Cu toate acestea, rețineți că dezvoltarea pe termen lung cu acest preprocesor vă poate dezvălui să utilizați sintaxa CSS clasică. Acest lucru cauzează uneori probleme atunci când trebuie să lucrați cu stiluri „pure”.

Chiar... nu contează. Toate opțiunile oferă aproximativ aceleași capabilități, doar sintaxa este diferită pentru fiecare. Vă recomandăm să faceți următoarele:

• dacă sunteți programator și doriți să lucrați cu stiluri ca cod, utilizați Sass;
• dacă sunteți un designer de layout și doriți să lucrați cu stiluri ca și cu aspectul obișnuit, acordați atenție Mai puțin;
• dacă îți place minimalismul, folosește Stylus.

Pentru toate opțiunile, sunt disponibile un număr mare de biblioteci interesante care pot simplifica și mai mult dezvoltarea. Utilizatorii Sass sunt sfătuiți să arunce o privire la Compass - instrument puternic cu multe caracteristici încorporate. De exemplu, după instalarea acestuia, nu va trebui niciodată să vă faceți griji cu privire la prefixele furnizorului. Ușurează lucrul cu ochiuri. Există utilități pentru lucrul cu culori și sprite. Sunt disponibile un număr de mix-uri deja anunțate. Dedicați câteva zile acestui produs - astfel veți economisi mult efort și timp în viitor.

Astăzi vreau să vorbesc despre de ce și cum am ajuns să folosim preprocesorul Stylus în dezvoltarea Yandex.Mail și, de asemenea, să descriu metoda pe care o folosim pentru a lucra cu stiluri pentru IE. Este foarte ușor de implementat folosind preprocesoare și face ca suportul IE să fie simplu și convenabil. Am dezvoltat o bibliotecă specială pentru aceasta, pe care o vom împărtăși și - if-ie.styl.

Acesta este doar primul articol dintr-o serie de articole despre utilizarea preprocesorului Stylus în Yandex.Mail, pe care îl pregătim pentru publicare.

În plus, are deja peste treizeci de teme de design. Există teme cu fundal deschis și cu unul întunecat, există teme care diferă între ele doar prin culori și sunt acelea în care aproape toată interfața este modelată manual din plastilină (http://habrahabr.ru/ company/yandex/blog/110556/ ). Unele subiecte au doar unul imagine de fundal, iar în altele fundalul se poate schimba - aleatoriu sau în funcție de ora din zi și vreme.

Din această cauză, apar multe variații în prezentarea vizuală a interfeței, ceea ce ne obligă să abordăm procesul de dezvoltare puțin diferit și să căutăm instrumente mai potrivite pentru rezolvarea problemei.

Când am lansat prima dată interfața neo2, am ales o soluție care ne era familiară - motorul de șabloane Template Toolkit 2, cu un scenariu oarecum nestandard pentru a-l folosi pentru a genera CSS mai degrabă decât HTML. La început aveam nevoie doar de variabile, dar cu timpul subiectele au devenit mai complexe, iar în cele din urmă s-a dovedit că un astfel de instrument era incomod. Sintaxă greoaie, lipsă de funcții specializate Funcții CSS iar un sentiment general de utilizare a instrumentului în alte scopuri ne-a făcut să căutăm alte opțiuni. Ne-am dat seama că nu ne putem lipsi de un preprocesor.

Există multe alte lucruri utile foarte diferite în Stylus, dar cele menționate mai sus ne-au făcut să-l alegem în favoarea.

Desigur, pe lângă avantaje, Stylus-ul are și dezavantaje. Iar cea principală este sintaxa flexibilă - autorii preprocesorului îl consideră principalul său avantaj. În căutarea flexibilității, au implementat complet doar sintaxa bazată pe indentare, în timp ce opțiunea „a la CSS” este cumva înșurubat deasupra și nu veți putea să luați și să redenumiți .css în .styl - nu toate CSS-urile opțiunile de scriere vor funcționa și în Stylus. Dar am decis că capacitățile pe care ni le oferă acest preprocesor fac deficiențele sale mai puțin semnificative, așa că a trebuit să suportăm o parte din capriciositatea parserului (și să începem să folosim sintaxa bazată pe indentare).

Rezumând povestea despre alegere, este de remarcat faptul că Sass și Stylus sunt două opțiuni aproape echivalente. Fiecare dintre ele are propriile sale avantaje și caracteristici unice, precum și dezavantaje. Dacă utilizați deja unul dintre aceste preprocesoare și sunteți mulțumit de toate, grozav, nu trebuie să vă gândiți să căutați unul nou. Dar dacă tocmai vă apropiați de alegere sau vă simțiți copleșit de preprocesorul pe care îl utilizați, încercați să comparați toate opțiunile. Cel mai bun mod Pentru a face acest lucru, încercați fiecare preprocesor pentru propria sa sarcină. După ce a dezvoltat o parte a proiectului dumneavoastră pe fiecare dintre preprocesoare, veți înțelege care dintre capacitățile lor sunt importante pentru dvs. și care nu. Doar nu uitați că un preprocesor nu este doar o sintaxă diferită, ci și o abordare diferită: cu o astfel de reproiectare, puteți, în același timp, refactoriza codul, făcând ceva mai optim decât a fost cu CSS simplu.

Cu toate acestea, trebuie să vă spunem despre încă o funcție care s-a dovedit a fi foarte utilă pentru noi în cadrul tematizării Yandex.Mail. Aceasta este funcția rgba-ie. De fapt, această funcție ar putea fi numită doar rgba , dar Stylus are o eroare: funcțiile definite în JS nu pot fi suprascrise în același mod ca cele definite în Stylus, așa că a trebuit să creăm una nouă.

Ce face ea? IE-urile mai vechi nu acceptă valorile de culoare specificate în format rgba. Prin urmare, de obicei, dezvoltatorii fie specifică culorile corespunzătoare de două ori - mai întâi pentru vechiul IE în formatul hex obișnuit și apoi pentru toate browserele normale în rgba dorită - fie folosesc modernizr și, folosindu-l și clasa .rgba, setează culorile corespunzătoare unde necesare. Dar pentru fallback-uri în IE, de fiecare dată mai trebuie să calculăm culoarea aproximativă a în care o vom degrada. Cel mai adesea aceasta va fi culoarea dorită suprapusă peste fundalul paginii sau pe fundalul elementului din mijloc, cu o culoare rgba aplicată deasupra acesteia.

Funcția rgba-ie de la if-ie.styl simplifică foarte mult această sarcină: dublând capacitățile funcției obișnuite rgba, obținem un alt parametru opțional care poate fi transmis funcției - culoarea de fundal pentru fallback. În mod implicit, acest parametru este setat la #FFF .

Exemplu simplu:

Culoare Foo: rgba-ie(0,0,0,0.5)

ÎN browsere obișnuite această culoare va fi rgba obișnuită(0,0,0,0.5), dar în IE se va transforma în #808080 - adică culoarea corespunzătoare suprapusă deasupra albului.

Mai mult exemplu complex, cu fundalul țintă ca ultim argument (și folosind una dintre caracteristicile Stylus - capacitatea de a specifica o culoare hexagonală în loc de trei cifre r , g și b):

Fundal Foo: rgba-ie(#FFDE00, .42, #19C261)

În acest exemplu, pentru browserele normale, culoarea va fi rgba(255,222,0,0.42) , dar IE va obține #7ace38 corect.

În același timp, este posibil să setați alternativa implicită folosind variabila $default_rgba_fallback.

Drept urmare, vă puteți simplifica foarte mult viața dacă utilizați funcția rgba-ie în loc de rgba obișnuită - în acest caz aproape că nu va trebui să vă amintiți despre IE.

Etichete:

Dacă faci parte din scena Front-End, poate că ai auzit de Stylus, un văr îndepărtat al limbajului preprocesorului Sass pe care nimeni nu-l cunoaște cu adevărat. La fel ca Sass, Slylus este un preprocesor CSS scris în Node.js. Conform serviciului web GitHub, acesta se definește astfel:

[…] revoluționar limbă nouă, care oferă o modalitate eficientă, dinamică și expresivă de a crea CSS.

Ei bine, să spunem că folosirea cuvântului „revoluționar” este puțin exagerată aici. Dar totul este adevărat. "Ce? Altul?” - întrebi. „Cam,” voi răspunde. Dar Stylus nu este deloc o limbă nouă. Și-a început existența pe la începutul anului 2011, dar, după cum am observat, părerile despre el variază destul de mult. Apropo, știați că cele mai recente modificări la Mozilla Developer Network au fost făcute folosind Stylus? David Walsh, care a lucrat la proiect, a scris și despre cum să începeți cu Stylus.

Deci, care sunt avantajele Stylus față de Sass? În primul rând, este dezvoltat pe baza Node.sj, ceea ce este un plus pentru mine personal. Deși este grozav că puteți utiliza Sass într-un flux de lucru Node datorită wrapper-ului Sass pentru LibSass, nu același lucru se poate spune despre LibSass scris în Node.

În plus, Slylus are o sintaxă extrem de flexibilă, care poate fi bună sau rea în funcție de proiect, de echipă și de tendința de a adera la principii stricte de codificare. Cred că sintaxa maleabilă este un lucru bun, atâta timp cât nu puneți prea multă logică în foaia de stil și nu introduceți codul înainte de a vă implica.

În general, Stylus și Sass acceptă destul de multe aceleași caracteristici; puteți arunca o privire la lista completă de caracteristici a Stylus-ului, dar nu vă așteptați la nimic revoluționar (deși există câteva funcții avansate acolo). Slylus acceptă, de asemenea, o mulțime de caracteristici de sintaxă, deși contururile sunt mult mai neclare decât în ​​Sass: puteți scrie în stiluri diferite oricum doriți (indentat, stil CSS) și puteți amesteca și potrivi într-un singur stil (parser-ul pentru aceasta trebuie să fi fost distractiv de scris).

Deci ce crezi? Vrei să-l încerci?

Să începem

După cum am menționat mai devreme, Slylus este scris în Node.js, astfel încât să îl putem instala ca orice alt pachet npm:

$ npm instalează stylus -g

De acolo, îl puteți conecta la un lucrător Node folosind API-ul JavaScript sau puteți utiliza executabilul din linia de comandă pentru a compune foi de stil. De dragul simplității, vom folosi instrumentul linie de comandă Stylus, dar nu ezitați să-l împrumutați din scriptul Node, Gulp sau Grunt

stylus ./stylesheets/ --out ./public/css

Comanda anterioară îi spune lui Stylus să colecteze toate stilurile Stylus (.styl) din folderul foi de stil și să le colecteze în folderul public/css. Desigur, puteți să vă uitați și la director dacă doriți să faceți modificări:

stylus --watch ./stylesheets/ --out ./public/css

Stiluri de scriere în Stylus

Dacă tocmai ați început și nu doriți să vă copleșiți cu o nouă sintaxă, să știți că puteți scrie css simpluîn fișierul .styl. Deoarece Stylus acceptă sintaxa CSS standard, puteți începe cu codul CSS, doar pentru a-l întări puțin.

Sintaxa de bază

În ceea ce privește sintaxa în sine, aproape totul este opțional. Bretele: de ce să te deranjezi? Colon: haide! Virgule: da, cine are nevoie de ele! Paranteze: va rog. Mai jos este ideal codul corect Stylus:

Foo .bar culoare fundal roșii deepskyblue

Ceva o încălcare la prima vedere, dar ne putem obișnui, mai ales când sunt disponibili markeri sintactici. După cum probabil ați ghicit, codul anterior se compilează în:

Foo, .bar (culoare: roșie; fundal: deepskyblue; )

Variabile

Funcția cea mai frecvent utilizată de la preprocesoarele CSS ar trebui să fie capabilă să definească variabile. Nu este de mirare că Slylus oferă și asta. Deși spre deosebire de Sass, ele sunt exprimate cu un semn egal (=) mai degrabă decât cu două puncte (:). În plus, semnul dolarului ($) este opțional și poate fi omis în siguranță.

//Definirea variabilei `text-font-stack` text-font-stack = "Helvetica", "Arial", sans-serif; // Folosește-l ca parte a proprietății corpului `font` font 125% / 1.5 text-font-stack

Acum există ceva ce face Stylus pe care Sass sau orice alt preprocesor nu face: căutați valoarea unei proprietăți. Să presupunem că doriți să aplicați o marjă stângă negativă de jumătate de lățime; în Sass va trebui să stocați lățimea într-o variabilă, dar nu în Stylus:

Când folosim @width, îi spunem lui Stylus să obțină valoarea lățimii

proprietățile blocului curent, tratându-l ca o variabilă. Destul de simplu! Un alt caz de utilizare interesant este acela de a scoate o proprietate în funcție de dacă a fost definită anterior:

Foo // ... alte stiluri z-index: 1 dacă nu @z-index

În acest caz, z-index va avea valoarea 1, cu excepția cazului în care .foo a avut deja una valoarea stabilită pentru proprietatea z-index. Împreună cu mixin-uri, aceasta va fi o mișcare puternică.

Mixine

Apropo de asta, haideți să definim ce este un mixin, deoarece este probabil una dintre cele mai populare caracteristici Sass! Aditivul Stylus nu are nevoie de un specific cuvânt cheie; este un mixin dacă are paranteze (vide sau nu) la sfârșitul numelui său.

Dimensiune (lățime, înălțime = lățime) lățime lățime înălțime înălțime

La fel ca în primul caz, pentru a include un mixin, nu aveți nevoie de sintaxă specială, cum ar fi @include sau +:

Dimensiune foo (100px)

Puteți chiar să omiteți parantezele dacă doriți, caz în care va părea că utilizați complet o proprietate CSS standard (nu încă). Acest mecanism se numește impurități transparente, deoarece incluziunile lor sunt invizibile.

Dimensiune foo 100px

Aceasta poate părea un truc inutil la prima vedere, dar această caracteristică permite de fapt autorilor să extindă sintaxa standard CSS. Luați în considerare următorul amestec de preaplin:

Overflow(valoare) if value == puncte suspensie spatiu alb nowrap overflow ascuns text-overflow elipse altfel overflow: valoare

Dacă valoarea dată este puncte suspensie, se tipărește binecunoscutul triplet de declarație necesar pentru a avea o linie plină de puncte suspensive. În caz contrar, imprimă valoarea dată. Iată cum îl vei folosi:

Foo overflow elipse

Și asta va da:

Foo (spațiu alb: nowrap; overflow: ascuns; text-overflow: elipse; )

Trebuie să recunoști, acesta este un truc destul de grozav. Deși poate fi confuz (și posibil periculos); să poată extinde proprietățile CSS standard cu sensuri suplimentare de fapt un concept interesant.

Dacă doriți să transmiteți conținut unui mixin, stil @content, este posibil printr-o variabilă (bloc). În timpul includerii, trebuie doar să prefixați numele mixului cu un + pentru a-i oferi conținut suplimentar.

Has-js() html.js & (block).foo +has-js() culoare roșu

Acest cod a fost compilat pentru:

Html.js .foo (culoare: #f00; )

Ultimul și foarte caracteristică interesantă Mixuri de stylus: au întotdeauna o variabilă de argumente locale care conține toate argumentele (dacă există) care sunt transmise mixin-ului atunci când sunt incluse acolo. Această variabilă poate fi manipulată și tratată ca o matrice, de exemplu pentru a prelua valoarea la indecși specifici folosind combinația [..] ca în JavaScript.

Si in concluzie...

Ar fi prea lung să parcurgem toate caracteristicile și trucurile de sintaxă de la Stylus și cred că am făcut deja o introducere decentă, suficientă pentru a ne face măcar să începem!

După cum puteți vedea, Stylus-ul este foarte flexibil. Dintre toate instrumentele care vă pot ajuta să scrieți CSS, Stylus este de departe singurul care aduce CSS mai aproape de un limbaj de programare real.

Rețineți că Stylus are și propriul cadru, la fel cum Sass are Compass și se numește Nib. Nib sunt instrumente care oferă asistență suplimentară și suport între browsere pentru mixurile Stylus.

Unora le poate plăcea și altora nu. Deși sfatul meu este să fii foarte strict cu sintaxa. Lucrul cu o astfel de sintaxă tolerantă poate să nu fie întotdeauna o fericire. Oricum, e bine să vezi o concurență sănătoasă pentru Sass.