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. Cunoașterea Stylus

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 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 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, 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ă, există multe variante. reprezentare vizuală interfață, ceea ce ne obligă să abordăm procesul de dezvoltare puțin diferit și să căutăm instrumente care sunt 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 sentimentul 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 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, 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 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

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, ș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; poti arunca o privire la lista completa Caracteristici stylus, dar nu vă așteptați la nimic revoluționar (deși există câteva funcții avansate). Slylus acceptă, de asemenea, o mulțime de caracteristici de sintaxă, deși marginile 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 proces de lucru Node cu folosind JavaScript API sau puteți utiliza linia de comandă linie de comandă executabil 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! Altul 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 avea valoarea 1, cu excepția cazului în care .foo a avut deja una valoarea stabilită Pentru proprietățile 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ă valoare dată este elipsă, imprimă binecunoscutul triplet de declarație necesar pentru a avea o linie plină de elipse. Î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 standardul Proprietăți CSS 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 mixuri de asistență între browsere pentru 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.

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 acestora, în ultimii ani 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ă încerce să analizeze ceva în ele. ÎN caz general, procesul de compilare este automatizat astfel încât să anuleze 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 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 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 pornirii folosind CSS De obicei, nu este o lipsă de înțelegere a faptului că este bine sau rău pentru preprocesoare - oamenii sunt intimidați de ideea 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.

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

Preprocesorul CSS (din limba engleză preprocesor CSS) este un add-on la 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 vocabularul cu un nou concept: zahăr sintactic.

Syntactic Sugar (din 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, în cazul general, descrie complet esența acestora. 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 speciali de proiecte. 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 lui 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 în altul și altul în altul, 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

Pentru a spune foarte pe scurt, folosind mixins (din 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 pe care 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 de preprocesoare există acum trei tabere principale, în război:

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 frecvent întâlnită în special printre amatori. Preprocesor Sass, care este considerat cel mai vechi și cel 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, aproape standard pentru Sintaxa CSSși capacitatea de a extinde funcționalitatea printr-un sistem de plugin.

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 este, de asemenea, 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).