Preprocesor CSS: prezentare generală, selectarea, aplicarea

Absolut toate designeri web folosesc preprocesor. Nu există excepții. Dacă doriți să reușească în această activitate, nu uita despre aceste programe. La prima vedere, ele pot provoca o groază novice liniștit - este prea similar cu programare! De fapt, puteți face cu toate caracteristicile preprocessor CSS pentru aproximativ o zi, și dacă încercați, apoi câteva ore. În viitor, acestea vor simplifica în mod semnificativ viața ta.

Cum a CSS preprocesorul

Pentru a înțelege mai bine caracteristicile acestei tehnologii, se îngropa pe scurt în istoria prezentării vizuale a paginilor Web.

Când abia a început doar utilizarea masivă a internetului, fără foi de stil nu exista. Executarea documentelor depinde în întregime pe browser. Fiecare dintre ei au avut propriile lor stiluri, care au fost utilizate pentru tratamentul anumitor etichete. În consecință, paginile arată diferit în funcție de ordinea în care browserul pe care le deschide. Rezultatul - haos, confuzie, probleme pentru dezvoltatori.

În 1994, om de știință norvegian Håkon Lie a dezvoltat o foaie de stil care ar putea fi folosite pentru apariția paginilor separat de documentul HTML. Cei priglanulas idee membrii W3C, care a început imediat la finalizare. Câțiva ani mai târziu a publicat o primă versiune a caietului de sarcini CSS. Apoi, ea a fost îmbunătățită în mod constant, în curs de finalizare ... Dar conceptul a rămas tot același: fiecare set stil anumite proprietăți.

Folosind tabele CSS a fost întotdeauna problematică. De exemplu, designerii web au avut adesea probleme cu sortarea și gruparea caracteristici, și moștenirea nu este atât de simplu.

Și apoi a venit cu două miime. Marcajele sunt din ce în ce a început să se angajeze în dezvoltatori profesioniști front-end, ceea ce este important să fie stiluri de lucru flexibile și dinamice. Exista la plasarea în timp a cerut prefixele CSS și urmărirea suport noile capabilități ale browser-ului. Apoi, prin JavaScript, și experții Ruby ajuns la afaceri, crearea unui preprocesor - suprastructura pentru CSS, caracteristici noi sunt adăugate la acesta.

CSS pentru începători: caracteristici preprocesorul

Ei au mai multe funcții:

• unifica prefixe browser-ul și khaki;

• simplifica sintaxa;

• da posibilitatea de a lucra cu selectoare imbricate fără erori;

• îmbunătăți stilul logica.

Pe scurt: preprocesorul adaugă CSS capabilități logica de programare. Acum, stilizare nu se realizează în lista obișnuită de stiluri și cu câteva tehnici simple și abordări: variabile, funcții, hagfish, cicluri de condiții. În plus, capacitatea de a folosi matematica.

Văzând popularitatea acestor add-in-uri, W3C au început să adăugați treptat posibilitatea de a le în codul CSS. De exemplu, în caietul de sarcini, astfel funcția există calc (), care este susținută de mai multe browsere. Este de așteptat ca în curând va fi posibil să se stabilească variabile și de a crea un hagfish. Cu toate acestea, acest lucru se va întâmpla în viitorul îndepărtat, și preprocesoare deja aici și deja funcționează bine.

preprocesoare populare CSS. Sass

Proiectat în 2007. Inițial o componentă Haml - un șablon HTML. Noile caracteristici pentru elemente CSS dezvoltatorii de control savurat pe Ruby on Rails, care a început să se răspândească peste tot. SNS-urile un număr foarte mare de caracteristici care sunt acum incluse în orice Preprocessor: variabile, încastrarea selectori, (apoi, cu toate acestea, nu pot fi adăugate aceste argumente) hagfish.

Declararea variabilelor în Sass

Variabilele declarate cu semnul $. Ele pot menține proprietățile și seturile lor, de exemplu: „$ borderSolid: roșu solid 1px;“. În acest exemplu, am declarat o variabilă numită borderSolid și salvat-o valoare red 1px solid. Acum, dacă în CSS avem nevoie pentru a crea o lățime de frontieră roșu de 1px, pur și simplu indică faptul că variabila după numele proprietății. După anunțarea variabilelor nu pot fi schimbate. Există mai multe funcții încorporate. De exemplu, declara o variabilă cu o valoare de $ redcolor # FF5050. Acum, în codul CSS în proprietățile de orice element, utilizați-l pentru a seta culoarea fontului: p {color: $ redColor; }. Doriți să experimentați cu culoarea? Utilizați funcția luminează sau întunecă. Acest lucru se face, astfel: p {color: întunece ($ redColor, 20%); }. Ca rezultat, redColor culoare va fi de 20% mai ușoare.

Cele Sass multe built-in funcții. În valoare de cel puțin să le citească, dar mai bine - să învețe.

cuiburi

Anterior, pentru a indica cuibărit a trebuit să folosească un design lung si inconfortabil. Imaginați-vă că avem un div, care este p, și în ea, la rândul său, setați durata. Pentru div, avem nevoie pentru a seta culoarea fontului roșu, pentru p - galben, pentru intervalul - roz. Într-un CSS tipic ar fi făcut după cum urmează:

div {

Culoare: roșu;

}

div p {

Culoare: galben;

}

div p interval {

culoare: roz;

}

Cu preprocessor CSS totul devine mai ușor și mai compact:

div {

Culoare: roșu;

p {

Culoare: galben;

.span {

culoare: roz;

}

}

}

Elemente literalmente „investit“ unul pe altul.

Directivele preprocesorului

Folosind directivele @import pot importa fișiere. De exemplu, avem fișier fonts.sass care declară stilurile de fonturi. Conectați-l la style.sass fișierul principal: „fonturi“ @import. Gata! În loc de un singur fișier mare, cu stilurile avem câteva care pot fi folosite pentru un acces rapid și ușor la proprietățile cerute.

hagfish

Una dintre cele mai interesante idei. Acesta permite o linie pentru a solicita un set de proprietăți. Se acționează după cum urmează:

@mixin largeFont {

font-family: 'Times New Roman';

font-size: 64px;

line-height: 80px;

font-weight: bold;

}

Hagfish să se aplice elementul de pe pagina, utilizați @include directivă. De exemplu, vrem să-l aplice în antetul H1. Avem următoarea structură: h1 {@include: largeFont; }

Toate proprietățile hagfish sunt atribuite un element H1.

preprocesor mai puțin

Sintaxa Sass reamintește de programare. Dacă sunteți în căutarea pentru o opțiune care este mai potrivit pentru incepatori care studiază CSS, uita-te pentru mai puțin. Acesta a fost creat în 2009. Principala caracteristică - suport pentru sintaxa CSS nativ, deci familiarizat cu programarea Imposer va fi mai ușor de a învăța.

Variabilele sunt declarate folosind simbolul @. De exemplu: @fontSize: 14px;. lucrări cuibar pe aceleași principii ca și în Sass. Hagfish sunt anunțate după cum urmează: .largeFont () {font-family: 'Times New Roman'; font-size: 64px; line-height: 80px; font-weight: bold; }. Pentru a conecta nu este necesar să se utilizeze directivele preprocesor - trebuie doar să adăugați hagfish nou creat în proprietățile elementului selectat. De exemplu: h1 {.largeFont; }.

Stylus

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

Variabilele pot fi declarate în două moduri - fie în mod explicit sau implicit. De exemplu: font = 'Times New Roman'; - o opțiune implicită. Dar $ font = 'Times New Roman' - clar. Hagfish sunt declarate și conectate implicit. Sintaxa este următoarea: redColor () de culoare roșie. Acum putem adăuga un articol, de exemplu: redColor H1 ();.

Stylus pe prima vedere poate părea de neînțeles. În cazul în care este parantezele „nativ“ și virgulele? Dar este necesar să se cufunda în ea, totul devine mult mai clar. Amintiți-vă, cu toate acestea, faptul că dezvoltarea pe termen lung a acestei Preprocessor poate „dezvata“ utilizați sintaxa CSS clasic. Acest lucru poate cauza uneori probleme atunci când trebuie să lucreze cu un stil „pur“.

Ce preprocesor aleg?

De fapt, este ... nu contează. Toate versiunile oferă aproximativ aceleași caracteristici doar sintaxa fiecare este diferit. Vă recomandăm să procedați după cum urmează:

• dacă tu - programator și doresc să lucreze cu ambele stiluri în cod, folosiți Sass;
• dacă tu - un coder și doresc să lucreze cu stiluri ca și cu formatul convențional, să acorde o atenție la mai puțin;
• dacă vă place minimalismul, utilizați stylus.

Pentru toate variantele unui număr nesfârșit de biblioteci interesante care pot simplifica și mai mult de dezvoltare. Utilizatorii Sass recomandat să acorde o atenție la Compass - un instrument puternic, cu multe caracteristici încorporate. De exemplu, după ce îl instalați niciodată nu va trebui să vă faceți griji cu privire la versiunea furnizor prefixul. Simplifică lucra cu grile. Există instrumente pentru lucrul cu flori, sprite. O gamă anunțat deja hagfish. Dă acest instrument de câteva zile -, astfel, va salva o mulțime de timp și efort în viitor.