Preprocesor CSS: prezentare generală, selecție, aplicație. De ce am început să folosim preprocesorul Stylus în Yandex.Mail și, de asemenea, despre biblioteca care vă ajută să trăiți cu IE. De ce nu așteptați ca CSS să evolueze?

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 diverse posibilitatiși beneficiile utilizării a trei preprocesoare diferite: Sass, LESS și Stylus.

Introducere Preprocesoarele creează CSS care funcționează în toate browserele.

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.

Sintaxă

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

SASS&LESS

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 încă există, este depreciat și nu îl vom folosi în acest exemplu. Sintaxa folosește extensia .sass și arată astfel:

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

Stylus

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

Variabile

Variabilele pot fi declarate și utilizate în toată foaia de stil. Ele pot avea orice valoare care este o valoare CSS (cum ar fi culori, numere [unități incluse] sau text.) și pot fi referite oriunde în foaia noastră de stil.

Sass

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;
}

MAI PUȚIN

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;
}

Stylus

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

CSS compilat

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;
}

Atașamentul

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.

Sass, LESS și Stylus

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;
}
}
}
}

CSS compilat

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;
}

Mixine

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.

Sass /* Eroare de amestecare Sass cu argument (opțional) $borderWidth care este implicit la 2px dacă nu este specificat */
eroare @mixin ($borderWidth: 2px) (
chenar: $borderWidth solid #F00;
culoare: #F00;
}
.generic-error(
umplutură: 20px;
marginea: 4px;
eroare @include(); /* Aplică stiluri din eroarea mixin */
}
.eroare de conectare(
stânga: 12px;
poziție: absolută;
sus: 20px;
eroare @include (5px); /* Aplică stiluri din eroarea de mixare cu argumentul $borderWidth egal cu 5px*/
)LESS /* LESS eroare de mixare cu argument (opțional) @borderWidth care este implicit la 2px dacă nu este specificat */
.error(@borderWidth: 2px) (
chenar: @borderWidth solid #F00;
culoare: #F00;
}
.generic-error(
umplutură: 20px;
marginea: 4px;
.eroare(); /* Aplică stiluri din eroarea mixin */
}
.eroare de conectare(
stânga: 12px;
poziție: absolută;
sus: 20px;
.error(5px); /* Aplică stiluri din eroarea de mixare cu argumentul @borderWidth egal cu 5px */
)stylus /* Eroare de amestecare a stylusului cu argument (opțional) borderWidth, care este implicit la 2px dacă nu este specificat */
eroare(borderWidth= 2px) (
chenar: borderWidth solid #F00;
culoare: #F00;
}
.generic-error(
umplutură: 20px;
marginea: 4px;
eroare(); /* Aplică stiluri din eroarea mixin */
}
.eroare de conectare(
stânga: 12px;
poziție: absolută;
sus: 20px;
eroare (5px); /* Aplică stiluri din eroarea de mixare cu argumentul borderWidth egal cu 5px */
) CSS compilat

Toate preprocesoarele compun același cod:

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

Moştenire

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.

Sass & Stylus .block (
marjă: 10px 5px;
umplutură: 2px;
}
p(
@extinde
chenar: 1px solid #EEE;
}
ul, ol (
culoare: #333;
text-transform: majuscule;
)CSS compilat (Sass &Stylus) .block, p, ul, ol (
marjă: 10px 5px;
umplutură: 2px;
}
p(
chenar: 1px solid #EEE;
}
ul, ol (
culoare: #333;
text-transform: majuscule;
)MAI PUȚIN

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:

Bloc (
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;
}

CSS compilat (LESS).block(
marjă: 10px 5px;
umplutură: 2px;
}
p(
marjă: 10px 5px;
umplutură: 2px;
chenar: 1px solid #EEE;
}
ul,
ol (
marjă: 10px 5px;
umplutură: 2px;
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ă.

Import

Î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 fisiere separate foarte util pentru organizatie.

Fișier Sass, LESS și Stylus /*.(tip) */
corp (
fundal: #EEE;
}
@import „reset.css”;
@import „fișier.(tip)”;
p(
fundal: #0982C1;
)CSS compilat @import „reset.css”;
corp (
fundal: #EEE;
}
p(
fundal: #0982C1;
) Funcții de culoare

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.

Sass lighten($culoare, 10%); /* returnează o culoare cu 10% mai deschisă decât $culoarea */
întuneca ($culoare, 10%); /* returnează o culoare cu 10% mai închisă decât $culoarea */
saturate($culoare, 10%); /* returnează o culoare cu 10% mai saturată decât $color */
desaturare($culoare, 10%); /* returnează o culoare cu 10% mai puțin saturată decât $color */
tonuri de gri($culoare); /* returnează scala de gri de $culoare */
complement($culoare); /* returnează culoarea complementului $culoare */
inversează($culoare); /* returnează culoarea inversată a lui $culoare */
amestec ($culoare1, $culoare2, 50%); /* amestecați $culoare1 cu $culoare2 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ă 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%);
}

MĂRINA lumina(@culoare, 10%); /* returnează o culoare cu 10% mai deschisă decât @color */
întuneca(@culoare, 10%); /* returnează o culoare cu 10% mai închisă decât @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 saturată decât @color */
spin(@culoare, 10); /* returnează o culoare cu o nuanță cu 10 grade mai mare decât @color */
spin(@culoare, -10); /* returnează o culoare cu o nuanță cu 10 grade mai mică decât @color */
mix(@culoare1, @culoare2); /* returnează un amestec de @color1 și @color2 */

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 (
culoare de fundal;
chenar: 3px întunecat solid(@color, 50%);
}

stilul se deschide (culoare, 10%); /* returnează o culoare cu 10% mai deschisă decât „culoarea” */
întunecă (culoare, 10%); /* returnează o culoare cu 10% mai închisă decât „culoare” */
saturate (culoare, 10%); /* returnează o culoare cu 10% mai saturată decât „culoarea” */
desaturat(culoare, 10%); /* returnează o culoare cu 10% mai puțin saturată decât „culoarea” */

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
culoare de fundal
chenar 3px solid se întunecă (culoare, 50%)

Operațiuni

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

Corp Sass, LESS și Stylus (
margine: (14px/2);
sus: 50px + 100px;
dreapta: 100px - 50px;
stânga: 10 * 10;
)Aplicații practice

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 finaliștilor aplicații din lumea reală în care utilizarea unui preprocesor este o salvare.

Prefixe de furnizor

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:

Sass @mixin border-radius($valori) (
-webkit-border-radius: $valori;
-moz-border-radius: $valori;
border-radius: $valori;
}
div(
@include border-radius(10px);
)LESS .border-radius(@values) (
-webkit-border-radius: @values;
-moz-border-radius: @valori;
border-radius: @valori;
}
div(
.border-radius(10px);
)raza-chenar al stiloului (valori) (
-webkit-border-radius: valori;
-moz-border-radius: valori;
border-radius: valori;
}
div(
raza-chenar(10px);
)Compilat CSS div {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
chenar-rază: 10px;
)Text 3D

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!

Sass @mixin text3d($culoare) (
culoare: $culoare;
text-shadow: 1px 1px 0px întunecat($culoare, 5%),
2px 2px 0px se întunecă ($culoare, 10%),
3px 3px 0px se întunecă ($culoare, 15%),
4px 4px 0px se întunecă ($culoare, 20%),
4px 4px 2px #000;
}
h1 (
dimensiunea fontului: 32pt;
@include text3d(#0982c1);
) MAI MAI .text3d(@color) (
culoare: @culoare;
text-shadow: 1px 1px 0px întuneca(@color, 5%),
2px 2px 0px se întunecă(@color, 10%),
3px 3px 0px se întunecă(@color, 15%),
4px 4px 0px se întunecă(@color, 20%),
4px 4px 2px #000;
}
span (
dimensiunea fontului: 32pt;
.text3d(#0982c1);
)stylus text3d(culoare)
culoare: culoare
text-shadow: 1px 1px 0px întunecat(culoare, 5%), 2px 2px 0px întunecat (culoare, 10%), 3px 3px 0px întunecat (culoare, 15%), 4px 4px 0px întunecat (culoare, 20%), 4px 4px 2px #000
spa
dimensiunea fontului: 32 pt
text3d(#0982c1)

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

Compilat interval CSS {
dimensiunea fontului: 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;
)Rezultatul finalColoane

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:

Sass $siteWidth: 1024px;
$gutterWidth: 20px;
$sidebarWidth: 300px;
corp (
marja: 0 auto;
lățime: $siteWidth;
}
.conţinut(
plutește la stânga;
lățime: $siteWidth - ($sidebarWidth+$gutterWidth);
}
.sidebar(
plutește la stânga;
margine-stânga: $gutterWidth;
lățime: $sidebarWidth;
) MAI MAI @siteWidth: 1024px;
@gutterWidth: 20px;
@sidebarWidth: 300px;
corp (
marja: 0 auto;
lățime: @siteWidth;
}
.conţinut(
plutește la stânga;
lățime: @siteWidth - (@sidebarWidth+@gutterWidth);
}
.sidebar(
plutește la stânga;
margine-stânga: @gutterWidth;
lățime: @sidebarWidth;
)Stylus siteWidth = 1024px;
gutterWidth = 20px;
sidebarWidth = 300px;
corp (
marja: 0 auto;
lățime: siteWidth;
}
.conţinut(
plutește la stânga;
lățime: siteWidth - (sidebarWidth+gutterWidth);
}
.sidebar(
plutește la stânga;
margine-stânga: gutterWidth;
lățime: sidebarWidth;
) Corp CSS compilat (
marja: 0 auto;
lățime: 1024px;
}
.conţinut(
plutește la stânga;
lățime: 704px;
}
.sidebar(
plutește la stânga;
margine-stânga: 20px;
latime: 300px;
)Maniere minunate

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ă.

Rapoarte de erori

Dacă ați scris CSS pentru o perioadă de 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. E 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 capacităț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.

Cum au apărut preprocesoarele CSS

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 a provocat întotdeauna unele 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 flexibilitate și munca dinamica cu stiluri. 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.

CSS pentru începători: caracteristici ale preprocesoarelor

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ă logica de programare la capabilitățile CSS. Acum, stylingul nu se realizează prin enumerarea obișnuită a stilurilor, ci prin utilizarea mai multor tehnici și abordări simple: 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 în caietul de sarcini funcția calc(), 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.

Preprocesoare CSS populare. Sass

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 o cantitate mare 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).

Declararea variabilelor în Sass

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: darken($redColor, 20%); ). Acest lucru va face redColor cu 20% mai deschis.

Cuibărire

Anterior, era necesar să se folosească constructe lungi și incomode pentru a indica cuibărirea. 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.

Directive privind preprocesorul

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 un fișier de stil mare, avem mai multe care pot fi folosite pentru a accesa rapid și ușor proprietățile de care avem nevoie.

Peştişorii

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.

Preprocesor Mai puțin

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; ).

Stylus

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”.

Ce preprocesor ar trebui să alegeți?

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 - Unealtă 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.

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

[…] revoluționar Limba noua; limbaj 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, știai asta ultimele modificari pe Mozilla Developer Network au fost realizate 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? Vreau să încerc?

ÎNCEPE

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 linia de comandă Linie de comanda executabil pentru a compune foi de stil. De dragul simplității, vom folosi instrumentul de linie de comandă Stylus, dar nu ezitați să împrumutați unul 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! O alta varianta interesanta utilizarea este de a scoate proprietatea în funcție de faptul dacă a fost definită anterior:

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

În acest caz, z-index va fi 1, cu excepția cazului în care .foo avea deja 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 de fapt această caracteristică permite 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 singură linie plină de puncte suspensive. În caz contrar, ea imprimă valoarea stabilită. 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 mixinului 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-ar putea plăcea, iar 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.

CSS este un limbaj intenționat simplu. Odată cu proliferarea aplicațiilor web complexe, apariția pozițiilor de dezvoltator front-end și numărul tot mai mare de cerințe noi, această simplitate se evaporă rapid. Pentru cei neinițiați, preprocesoarele CSS (în special Sass, LESS și Stylus) vă extind capacitățile de stilare cu funcționalități suplimentare precum variabile, imbricare și mixuri, oferindu-vă mult mai mult control asupra o cantitate mare stiluri.

Există un deficit de articole care promovează utilizarea preprocesoarelor și oferă ghid rapid potrivit acestora, în anul trecut nu, și multe puncte au fost deja destul de bine descrise. Deci, să ne concentrăm pe ceea ce este adesea trecut cu vederea și să vedem ce se poate face împotriva soluțiilor terminale.

Introducere (opțional)

După cum sa menționat în introducere, lucruri precum Sass, LESS și Stylus ne oferă funcționalități suplimentare pe lângă CSS, dar fișierele scrise în aceste limbi trebuie compilate în CSS înainte ca browserul să poată încerca să analizeze ceva în ele. În general, procesul de compilare este automatizat astfel încât să minimizeze orice impact asupra fluxului de lucru.

Folosind oricare dintre preprocesoarele enumerate, puteți beneficia de următoarele:

Expresivitatea: Fiecare dintre preprocesoare conține un set de convenții de economisire a timpului, a căror esență constă în opționalitatea sau respingerea diferitelor reguli de punctuație. În funcție de preferințele dvs., stilurile pot fi eliberate din paranteze, punct și virgulă și/sau virgule obișnuite. În plus, toate acceptă imbricarea selectoarelor.

Funcționalitate avansată: aceste limbi, în diferite grade, oferă caracteristici suplimentare să ne modelăm stilurile; Aceasta include mixin (bucăți de cod reutilizabil care pot lua argumente opționale), extensii (moștenirea clasei) și suport pentru variabile.

Suplimente: pentru a extinde arsenalul standard, sunt utilizate pe scară largă diverse suplimente. Sass are Compass, Stylus are Nib și, deși este o poveste diferită, Bootstrap, care nu are nevoie de prezentare, este construit cu LESS.

Beneficii reale

De fapt, principalul beneficiu al preprocesoarelor constă în mai puțin efort - nu fizic (apăsați tastele mai rar), ci mental. Preprocesoarele vă oferă oportunitate eficientă eliminați o parte din sarcina obositoare a minții și comutați mai puțin între diferite aplicații, ceea ce este tipic în dezvoltarea front-end. Aveți o semnificație a culorii folosită frecvent? Stocați-l într-o variabilă în loc să îl căutați în jurul proiectului sau să îl stocați în memorie. Ai nevoie de o schimbare de culoare previzibilă și simplă? SASS are un set de operațiuni de culoare care nu fac altceva decât să elimine nevoia de a ajunge la cel mai apropiat selector de culoare.

Prin implementarea unui preprocesor, aveți ocazia să vă concentrați direct asupra stilurilor de scriere. Aritmetic design receptiv funcționează direct în fișierul de stil, fără a trece la calculator. Compass poate avea grijă de sprite pentru tine. Separarea stilurilor în fișiere modulare și apoi combinarea lor fără a afecta performanța este fără probleme.

Ideea principală este că: aceste limbi vă permit să vă concentrați pe rezolvarea problemelor, în loc să fiți distras de instrumente și schimbarea contextului.

Compilare nedureroasă

Principala barieră în calea începerii utilizării preprocesoarelor CSS nu este, de obicei, lipsa de înțelegere a faptului dacă sunt bune sau rele - oamenii sunt intimidați de oferta de a instala un pachet folosind linia de comandă sau perspectiva personalizării. expresii privite. Din fericire, toate aceste probleme pot fi ocolite dacă dintr-o dată terminalul nu este punctul tău forte.

Chiar în browser

Nu sunteți sigur? Aruncă o privire la aceste implementări de browser ale preprocesoarelor.

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. Noi am proiectat pentru asta bibliotecă specială, pe care îl 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.

Cum am ajuns să folosim preprocesoare Deși în exterior Yandex.Mail arată ca o aplicație cu o singură pagină, în interiorul acesteia conține un număr mare de diferite blocuri, modificările lor și contextele în care pot apărea aceste blocuri și modificări.

În plus, are deja peste treizeci de teme de design. Există teme cu fundal deschis și cu unul întunecat, sunt teme care diferă între ele doar prin culori, și sunt și acelea în care aproape toată interfața este turnată 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.

Alegerea unui preprocesor Am ales între trei opțiuni: Sass, Less și Stylus. Procesul a fost destul de simplu: am luat mai multe blocuri existente și apoi am încercat să le reproiectăm folosind fiecare dintre preprocesoare.

Stylus are mult mai multe lucruri utile foarte diferite, dar cele menționate mai sus au fost cele care 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 va fi posibil 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 de a face acest lucru este să încercați fiecare preprocesor pe propria sa sarcină. După ce ați 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 sa dovedit a fi foarte utilă pentru noi, ca parte a 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 Necesar. 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 browserele 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:

Adaugă etichete