Preprocesor CSS: prezentare generală, alegere, aplicație

Absolut toți designerii cu experiență de planificare utilizează preprocesoare. Nu există excepții. Dacă doriți să reușiți în această activitate, nu uitați de aceste programe. La prima vedere, ele pot provoca o oroare liniștită începător - este prea asemănătoare cu programarea! De fapt, puteți înțelege toate capabilitățile preprocesoarelor CSS în aproximativ o zi și, dacă încercați, apoi în câteva ore. În viitor, vă vor simplifica în mod semnificativ viața.

Cum au apărut preprocesoarele CSS

Pentru a înțelege mai bine caracteristicile acestei tehnologii, ne vom inspira pe scurt în istoria dezvoltării reprezentării vizuale a paginilor web.

Când aplicația de Internet de masă abia începea, nu existau foi de stil. Proiectarea documentelor depindea exclusiv de browsere. Fiecare dintre ele avea propriile stiluri, care erau folosite pentru procesarea anumitor etichete. În consecință, paginile păreau diferite în funcție de browserul în care le-ați deschis. Rezultatul este haos, confuzie, probleme pentru dezvoltatori.

În 1994, omul de știință norvegian Haakon Lee a elaborat o foaie de stil care ar putea fi utilizată pentru a proiecta aspectul paginii separat de documentul HTML. Ideea a fost invitată la reprezentanții consorțiului W3C, care au început imediat să lucreze la acesta. Câțiva ani mai târziu, a fost publicată prima versiune a caietului de sarcini CSS. Apoi a fost îmbunătățită în mod constant, a fost finalizată - dar conceptul a rămas același: fiecare stil are anumite proprietăți.

Utilizarea tabelelor CSS a provocat întotdeauna unele probleme. De exemplu, coderul avea adesea dificultăți în sortarea și gruparea proprietăților, iar moștenirea nu este atât de simplă.

Apoi au venit cele două mii. Dezvoltatorii profesioniști de top au început să facă marca mai des, pentru care lucrul flexibil și dinamic cu stiluri era important. CSS-ul care exista la momentul respectiv necesita prefixarea si urmarirea suportului pentru noile caracteristici ale browserului. Apoi experții jаvascript și Ruby au ajuns la afaceri, creând preprocesoare - add-on-uri pentru CSS, adăugând noi caracteristici.

CSS pentru începători: caracteristici ale preprocesoarelor

Ele îndeplinesc mai multe funcții:

• Unificați prefixele și hack-urile de browser;
• simplifica sintaxa;
• Permiteți să lucreze cu selectori imbricați fără erori;
• îmbunătățirea logicii stilului.

Pe scurt: preprocesorul adaugă logica programării la capabilitățile CSS. Acum, stilul nu se realizează prin enumerarea obișnuită a stilurilor, ci cu ajutorul mai multor tehnici și abordări simple: variabile, funcții, mixine, cicluri, condiții. În plus, a devenit posibilă utilizarea matematicii.

Văzând popularitatea unor astfel de aditivi, W3C a început să adauge treptat caracteristici de la acestea la codul CSS. De exemplu, funcția calc () a apărut în specificație, care este susținută de mai multe browsere. Se așteaptă ca în curând să fie posibilă setarea variabilelor și crearea de mixine. Totuși, acest lucru se va întâmpla în viitorul îndepărtat, iar preprocesorii sunt deja aici și lucrează deja perfect.

Proprocesoare CSS populare. Sass

A fost dezvoltat în 2007. Inițial, a fost o componentă a lui Haml, motorul șablon HTML. Noile caracteristici pentru manipularea elementelor CSS au venit la gustul dezvoltatorilor Ruby on Rails, care au inceput sa-l distribuie pretutindeni. În Sass a apărut un număr foarte mare de posibilități care sunt acum incluse în orice preprocesor: variabile, selectori de încorporare, mixuri (dar nu le puteai adăuga argumente).

Declararea variabilelor în Sass

Variabilele sunt declarate folosind semnul $. În ele, puteți salva proprietățile și seturile lor, de exemplu: "$ borderSolid: 1px solid red;". În acest exemplu, am declarat o variabilă numită borderSolid și am păstrat valoarea roșie roșie 1px în ea. Acum, dacă în CSS trebuie să creăm o margine roșie cu o lățime de 1px, pur și simplu specifică această variabilă după numele proprietății. După declarare variabilele nu pot fi modificate. Mai multe funcții încorporate sunt disponibile. De exemplu, declarați o variabilă $ redColor cu valoarea # FF5050. Acum, în CSS, în proprietățile unui element, îl folosim pentru a specifica culoarea fontului: p {color: $ redColor-}. Doriți să experimentați culoarea? Utilizați funcțiile mai întunecate sau mai luminoase. Aceasta se face astfel: p {culoare: întuneric ($ redColor, 20%) -}. Ca rezultat, culoarea redColor va fi cu 20% mai ușoară.

Sass are multe funcții încorporate. Vă recomandăm să vă familiarizați cel puțin cu acestea și să învățați mai bine.

cuiburi

Anterior, pentru a denota cuibăritul, a trebuit să folosim construcții lungi și incomode. Imaginați-vă că avem un div în care minciunile p, iar în el, la rândul lui, este o perioadă. Pentru div, trebuie să setăm culoarea fontului în roșu, pentru p-galben, pentru culoarea span-roz. În CSS obișnuite, acest lucru se va face astfel:

div {

culoare: roșu;

}

div p {

culoare: galben;

}

div p span {

culoare: roz;

}

Cu preprocesorul CSS, totul este mai ușor și mai compact:

div {

culoare: roșu;

p {

culoare: galben;

.span {

culoare: roz;

}

}

}

Elementele sunt literalmente "puse" unul în altul.

Prevederi directe

Prin directiva @import, puteți importa fișiere. De exemplu, avem un fișier fonts.sass, în care sunt declarate stiluri pentru fonturi. Conectăm-o la fișierul principal de stil.sass: @import lsquo-fontsrsquo-. Gata! În loc de un fișier mare cu stiluri, avem câteva pe care le puteți utiliza pentru a accesa rapid și ușor proprietățile necesare.

hagfish

Unul dintre cele mai interesante zadumok. Aceasta permite ca un set de proprietăți să fie specificat într-o singură linie. Lucrați după cum urmează:

@mixin largeFont {

font-family: lsquo-Times New Romanrsquo-;

font-size: 64px;

linia-înălțime: 80px;

font-weight: bold;

}

Pentru a aplica un mixin unui element dintr-o pagină, utilizați directiva @include. De exemplu, vrem să o aplicăm în antetul h1. Se obține următoarea construcție: h1 {@ include: largeFont-}

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

Mai puțin preprocesor

Sintaxa Sass amintește de programare. Dacă sunteți în căutarea unei opțiuni mai potrivite pentru elevii CSS începători, acordați atenție mai puține. A fost înființată în 2009. Caracteristica principală este sprijinul pentru sintaxa nativă CSS, astfel încât este mai ușor să o înveți pentru cei care nu sunt familiarizați cu programarea.

Variabilele sunt declarate cu simbolul @. De exemplu: @fontSize: 14px; Nesting funcționează pe aceleași principii ca și în Sass. Mixinurile sunt declarate după cum urmează: .largeFont () {font-family: lsquo-Times New Romanrsquo - font-size: 64px; linia-înălțime: 80px; font-weight: bold-}. Pentru conectare, nu este nevoie să utilizați directivele preprocesor - trebuie doar să adăugați un amestec proaspăt creat proprietăților elementului selectat. De exemplu: h1 {.largeFont-}.

Stylus

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

Variabilele pot fi declarate în două moduri - explicit sau implicit. De exemplu: font = lsquo-Times New Romanrsquo-- este o opțiune implicită. Dar $ font = lsquo-Times New Romanrsquo-explicit. Amestecurile sunt declarate și conectate implicit. Sintaxa este: redColor () culoarea roșie. Acum îl putem adăuga la element, de exemplu: h1 redColor () -.

La prima vedere, Stylus poate părea de neînțeles. Unde sunt parantezele "nativ" și punct și virgulă? Dar este necesar doar să se scufunde în ea, deoarece totul devine mult mai clar. Cu toate acestea, rețineți că o dezvoltare lungă cu acest preprocesor vă poate "dezactiva" utilizarea sintaxei clasice CSS. Acest lucru cauzează uneori probleme când trebuie să lucrați cu stiluri "curate".

Care preprocesor ar trebui să aleg?

De fapt, ithellip nu contează. Toate opțiunile oferă aproximativ aceleași oportunități, doar sintaxa fiecăruia este diferită. Vă recomandăm să acționați după cum urmează:

• dacă sunteți un programator și doriți să lucrați cu stiluri ca cod, utilizați Sass;
• dacă sunteți un designer de aspect și doriți să lucrați cu stiluri ca în cazul planului obișnuit, acordați atenție mai puțin;
• dacă vă place minimalismul, utilizați Stylus.

Pentru toate opțiunile este disponibil un număr mare de biblioteci interesante, care pot simplifica și mai mult dezvoltarea. Utilizatorii Sass sunt sfătuiți să acorde atenție Compass - un instrument puternic cu multe caracteristici încorporate. De exemplu, după instalare, nu va trebui niciodată să vă faceți griji cu privire la prefixele furnizorilor. Lucrul mai simplu cu grilele. Există utilități pentru a lucra cu culori, sprite. Sunt disponibile mai multe mixine deja declarate. Dați acestui instrument câteva zile - economisind astfel mult timp și energie în viitor.