Meniu
AcasăFișiere și foldere

Preprocesor CSS: revizuire, selecție, aplicație

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 deja 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 front-end profesioniști 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 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 î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 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).

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: întuneric($redColor, 20%); ). Ca rezultat, culoarea roșie va deveni 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:

Prin utilizarea 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 unul dosar mare cu stiluri avem mai multe care pot fi folosite rapid și acces facil la proprietățile cerute.

Migurină

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;

greutatea fontului: 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 începătorii care învață CSS, 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ă verifice Compass, un instrument puternic cu multe capacități î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ă luăm în considerare preprocesoarele împreună cu CSS, obținem o imagine mai clară decât luarea în considerare a conceptului de preprocesor separat.

Definiţie

Preprocesor CSS(din limba engleză preprocesor CSS) este un add-on CSS care adaugă capacități indisponibile anterior la CSS folosind noi constructe sintactice.

Sarcina principală a preprocesorului este de a furniza structuri sintactice convenabile pentru ca dezvoltatorul să le simplifice și, prin urmare, să accelereze dezvoltarea și sprijinirea stilurilor în proiecte.

Preprocesoarele CSS convertesc codul scris folosind un limbaj de preprocesor în cod CSS curat și valid.

Cu preprocesoare, puteți scrie cod care vizează:

  • Lizibilitatea umană
  • Structurat și logic
  • Performanţă

Și aceasta este doar o mică parte din ceea ce vă poate oferi preprocesorul. Dar nu te devansa.

Zahar sintactic

Înainte de a ne uita mai departe la preprocesoarele CSS, să ne actualizăm lexicul cu un nou concept: zahăr sintactic.

Zahar sintactic(din limba engleză syntactic sugar) sunt completări la sintaxa unui limbaj de programare care nu introduc modificări semnificative sau caracteristici noi, dar fac limbajul mai lizibil pentru oameni.

Zahărul sintactic introduce în limbaj opțiuni alternativeînregistrări ale construcțiilor încorporate în această limbă. Prin opțiuni alternative de înregistrare înțelegem construcții mai scurte sau mai convenabile pentru oameni, care în cele din urmă vor fi convertite de preprocesor în limba sursă, fără zahăr sintactic.

Dacă încercăm să aplicăm acest concept la preprocesoarele CSS, atunci acesta caz general, descrie pe deplin esența lor. Permiteți-mi să vă reamintesc încă o dată că sarcina principală a preprocesoarelor este de a simplifica și accelera dezvoltarea, dar cum altfel se poate face acest lucru dacă nu introduceți opțiuni alternative de înregistrare?

Ce tipuri de preprocesoare CSS există?

Este timpul să trecem la mai multe exemple concrete, și anume preprocesoarelor CSS înșiși. La momentul scrierii, există trei preprocesoare populare:

  • Sass (SCSS)
  • Stylus

Și câțiva jucători minori pentru noi:

  • Foi de stil de închidere
  • CSS Crush

Vom vorbi despre primele trei separat puțin mai jos, dar despre ultimele două nu vom vorbi deloc, din cauza nepopularității lor. Dacă se dorește, descrierile acestor preprocesoare pot fi găsite cu ușurință într-un motor de căutare.

Ce rost are folosirea preprocesoarelor?

După cum am menționat mai sus, principalele avantaje sunt lizibilitatea codului, structurarea și productivitatea crescută.

Există și alte motive pentru a începe să utilizați un preprocesor astăzi. Vreau să atrag atenția asupra acestui lucru, deoarece dezvoltatorii din trecut, și mulți chiar și acum, refuză să folosească preprocesoare, considerându-le complexe, de neînțeles și inutile.

CSS este greu

CSS standard este dificil. Sintaxa non-imbricare pe care o oferă preprocesoarele CSS este pur și simplu greu de citit. În plus, trebuie să vă amintiți numele părintelui atunci când cuibăriți. Lipsa variabilelor normale și a „funcțiilor” face codul CSS dezordonat și îngust la minte.

Documentatie disponibila

Au dispărut vremurile în care documentația de la preprocesoare era disponibilă numai pentru cei „cunoscuți”. Acum oricine poate cât mai repede posibil stăpânește oricare dintre preprocesoare și cu costuri minime rezistenţă

Ușurință în utilizare

Utilizarea preprocesoarelor este mai ușoară decât înainte și mult mai ușoară. Pentru a face acest lucru, trebuie doar să instalați un program care va monitoriza fișierele destinate preprocesorului și, atunci când se schimbă, va compila conținutul acestor fișiere în cod CSS pur.

Pentru utilizatorii mai avansați există constructori de proiecte speciali. Nu credeți că doar pentru că utilizați un program de preprocesor, mai degrabă decât un constructor de proiecte, nu sunteți suficient de cool. De fapt, astfel de robinete oferă control deplinși setări avansate, dar nu te face un Jedi.

Structura și consistența codului

Cea mai populară caracteristică oferită de orice preprocesor CSS este capacitatea de a imbrica selectoare unul în celălalt. Nu voi da un exemplu acum, deoarece partea corespunzătoare a cărții va fi scrisă despre capacitățile Less, inclusiv imbricarea. În acest moment, tot ce trebuie să știți este că, atunci când utilizați preprocesoare, puteți imbrica un selector într-un altul și altul într-o treime, rezultând ceva similar cu cuprinsul unei cărți:

1. Selector parental 1.1. Selector imbricat 1.2. Selector imbricat 1.2.1. Selector imbricat 1.3. Selector imbricat

Desigur, în viata reala Selectorii nu pot începe cu numere, totuși, pentru a face o paralelă între imbricare și cuprins, cred că o astfel de omisiune este potrivită aici.

Impurităţi

Ca să spun foarte pe scurt, folosind impurităţi(din limba engleză Mixins), puteți face codul reutilizabil. Acest lucru ajută la evitarea claselor de ajutor în marcarea sau duplicarea proprietăților de la selector la selector.

Modularitate

Un alt bonus care m-ar convinge să încep să folosesc un preprocesor CSS chiar acum ar fi capacitatea de a imbrica fișiere în fișiere, adică, cu alte cuvinte, de a concatena fișiere într-o anumită secvență. Da, acest lucru poate fi aranjat CSS pur, dar împreună cu alte caracteristici se dovedește a fi un instrument foarte puternic.

În același timp, avem oportunitatea de a partaja module (biblioteci mixin) pe care le-am creat pentru nevoile noastre și le-am găsit utile pentru alte persoane. Se pare că orice dezvoltator vă poate descărca biblioteca și o poate folosi în propriile scopuri, apelând mixin-urile pe care le-ați scris după cum este necesar.

De ce nu așteptați ca CSS să evolueze?

Dezvoltarea CSS face pași foarte mici și incerti, deoarece W3C prioritizează viteza de răspuns (performanță) CSS. Pe de o parte, acest lucru este corect și foarte important, dar, pe de altă parte, este o lipsă de confort pentru dezvoltatori.

Ca exemplu, voi folosi una dintre specificațiile CSS4, care a fost introdusă sub presiunea dezvoltatorilor - selectorul părinte. Un drum atât de lung de la idee la decizie s-a datorat faptului că W3C a considerat un astfel de selector ca fiind lent și utilizarea lui ulterioară pe site-uri ar duce la încetiniri sălbatice. Desigur, vorbim despre utilizarea pe scară largă a acestui selector, și nu despre cazuri izolate.

Așa că nu vă așteptați la revoluții și schimbări în viitorul apropiat care ar putea umbri funcționalitatea și capacitățile preprocesoarelor CSS.

Tipuri de preprocesoare

Desigur, ca în orice alt domeniu, există întotdeauna concurență, iar pe piața preprocesoarelor există acum trei tabere principale în război între ele:

  • Sass (SCSS)
  • Stylus

Le numesc ostili, pentru că fiecare adept al unuia dintre preprocesatori consideră că este de datoria lui să arunce impurități în reprezentanții altor, să spunem, credințe. Această ostilitate este deosebit de comună printre fanii preprocesorului Sass, care este considerat cel mai vechi și mai puternic dintre toate cele trei preprocesoare.

Pentru a fi complet, vreau să ofer o scurtă prezentare generală a fiecărui preprocesor:

Mai puțin

De fapt, eroul acestei cărți. Cel mai popular preprocesor la momentul scrierii. Fondat în 2009 de Alexis Sellier și scris în JavaScript (scris inițial în Ruby, dar Alexis a făcut mișcarea potrivită la momentul potrivit). Are totul capabilități de bază preprocesoare și chiar mai mult, dar nu are structuri și bucle condiționate în sensul obișnuit pentru noi. Principalul avantaj este simplitatea sa, sintaxa aproape standard pentru CSS și capacitatea de a extinde funcționalitatea printr-un sistem de plugin-uri.

Sass (SCSS)

Cel mai puternic dintre preprocesoarele CSS. Are o comunitate de dezvoltatori destul de mare. Fondat în 2007 ca un modul pentru HAML și scris în Ruby (există un port pentru C++). Are o gamă mult mai mare de capabilități în comparație cu Less. Capacitățile preprocesorului în sine sunt extinse de biblioteca multifuncțională Compass, care vă permite să depășiți cadru CSSși lucrează, de exemplu, cu sprite-uri în modul automat.

Are două sintaxe:

  • Sass (Syntactically Awesome Style Sheets) este o sintaxă CSS simplificată care se bazează pe identitate. Considerat ca invechit.
  • SCSS (Sassy CSS) - bazat pe sintaxa standard CSS.

Stylus

Cel mai tânăr, dar în același timp cel mai promițător preprocesor CSS. Fondată în 2010 de o personalitate binecunoscută din cercurile noastre, TJ Holowaychuk. Ei spun că acesta este cel mai convenabil și mai extensibil preprocesor și, de asemenea, este mai flexibil decât Sass. Scris în JavaScript. Acceptă o mulțime de opțiuni de sintaxă de la CSS la simplificat (lipsesc: , ; , () și unele paranteze).

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 un număr mare stiluri.

Există un deficit de articole care promovează utilizarea preprocesoarelor și oferă ghid rapid potrivit lor, nu în ultimii ani și multe puncte au fost deja descrise destul de bine. 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ă încerce 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:

Expresivitate: Fiecare dintre preprocesoare conține un set de convenții de economisire a timpului, a căror esență constă în opționalitatea sau refuzul 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.

Functionalitate avansata: Aceste limbi, în diferite grade, oferă posibilități suplimentare de modelare a stilurilor noastre; 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 ele aplicatii diverse, care este tipic pentru 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 îți permit concentrați-vă pe rezolvarea problemelor, în loc să fie distras de instrumente și schimbarea contextului.

Compilare nedureroasă

Principala barieră în calea pornirii folosind CSS preprocesoarele nu este de obicei o lipsă de înțelegere a faptului dacă este bine sau rău - oamenii sunt speriați de oferta de a instala un pachet folosind linie de comandă sau personalizarea perspectivei 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.

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ă

Cele mai multe 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 face conversia mai ușoară fișier existent CSS în preprocesor. Sass folosește extensia .scss și LESS folosește extensia .less. Fișier de bază Sass sau LESS pot fi configurate 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 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.

Sass

Variabilele Sass sunt adăugate cu un caracter $, iar valoarea și numele sunt separate prin punct și virgulă, la fel ca 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șament

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 sass de amestecare cu argument (opțional) $borderWidth care este implicit la 2px dacă nu este specificat */
eroare @mixin ($borderWidth: 2px) (
chenar: $borderWidth solid #F00;
culoare: #F00;
}
.eroare-generic(
umplutură: 20px;
marginea: 4px;
eroare @include(); /* Aplică stiluri din eroarea mixin */
}
.login-error(
stânga: 12px;
poziție: absolută;
sus: 20px;
eroare @include (5px); /* Aplică stiluri din eroarea mixin cu argumentul $borderWidth egal cu 5px*/
}

MAI PUȚIN

/* 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;
}
.eroare-generic(
umplutură: 20px;
marginea: 4px;
.eroare(); /* Aplică stiluri din eroarea mixin */
}
.login-error(
stânga: 12px;
poziție: absolută;
sus: 20px;
.error(5px); /* Aplică stiluri din eroarea de mixare cu argumentul @borderWidth egal cu 5px */
}

stiloul

/* 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;
}
.eroare-generic(
umplutură: 20px;
marginea: 4px;
eroare(); /* Aplică stiluri din eroarea mixin */
}
.login-error(
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;
}
.login-error(
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

.bloc(
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:

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

CSS compilat (mai puțin)

.bloc(
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 fişiere separate foarte util pentru organizatie.

Sass, LESS și Stylus

/* fișier.(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țiile culorii

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, culori mai întunecate și multe altele.

Sass

lumina ($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%);
}

MAI PUȚIN

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

stiloul

lumina (culoare, 10%); /* returnează o culoare cu 10% mai deschisă decât „culoarea” */
se î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” */

Lista completă Toate caracteristicile de culoare Stylus pot fi găsite 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%)

Operațiuni

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

Sass, LESS și Stylus

corp (
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 scurta aplicatii lumea reală, unde 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);
}

MAI PUȚIN

.border-radius(@values) (
-webkit-border-radius: @values;
-moz-border-radius: @valori;
border-radius: @valori;
}
div(
.border-radius(10px);
}

stiloul

raza-chenar(valori) (
-webkit-border-radius: valori;
-moz-border-radius: valori;
border-radius: valori;
}
div(
raza-chenar(10px);
}

CSS compilat

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 PUȚIN

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

stiloul

text3d(culoare)
culoare: culoare
umbră text: 1px 1px 0px întunecare (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 ales să scriu umbrele textului Stylus pe o singură linie, deoarece am omis acoladele.

CSS compilat

span (
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 final

Coloane

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(
plutire: stânga;
lățime: $siteWidth - ($sidebarWidth+$gutterWidth);
}
.sidebar(
plutire: stânga;
margine-stânga: $gutterWidth;
lățime: $sidebarWidth;
}

MAI PUȚIN

@siteWidth: 1024px;
@gutterWidth: 20px;
@sidebarWidth: 300px;
corp (
marja: 0 auto;
lățime: @siteWidth;
}
.conţinut(
plutire: stânga;
lățime: @siteWidth - (@sidebarWidth+@gutterWidth);
}
.sidebar(
plutire: stânga;
margine-stânga: @gutterWidth;
lățime: @sidebarWidth;
}

stiloul

siteWidth = 1024px;
gutterWidth = 20px;
sidebarWidth = 300px;
corp (
marja: 0 auto;
lățime: siteWidth;
}
.conţinut(
plutire: stânga;
lățime: siteWidth - (sidebarWidth+gutterWidth);
}
.sidebar(
plutire: stânga;
margine-stânga: gutterWidth;
lățime: sidebarWidth;
}

CSS compilat

corp (
marja: 0 auto;
lățime: 1024px;
}
.conţinut(
plutire: stânga;
lățime: 704px;
}
.sidebar(
plutire: stânga;
margine-stânga: 20px;
latime: 300px;
}

Un decor remarcabil

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. Este simplu. Dacă ceva nu este în regulă cu codul dvs., acesta 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.

Astăzi vreau să vorbesc despre de ce și cum am ajuns să folosim Preprocesor stylusîn dezvoltarea Yandex.Mail și, de asemenea, descriem 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 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.

Cum am ajuns să folosim preprocesoarele

Deși în exterior Yandex.Mail arată ca o aplicație de o pagină, în interiorul acesteia conține un număr mare de diverse blocuri, modificările acestora ș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, 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 zilei ș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. Sintaxa greoaie, lipsa funcțiilor specifice CSS și sentimentul general de utilizare a instrumentului în alte scopuri ne-au făcut să căutăm alte opțiuni. Ne-am dat seama că nu ne putem lipsi de un preprocesor.

Selectarea preprocesorului

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.

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 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 în schimb trei cifre culoarea r, g și b în hex):

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:

Adăugați etichete