Pretprocesor CSS: pregled, odabir, aplikacija

Apsolutno sve iskusni web dizajneri koriste preprocesora. Nema izuzetaka. Ako želite da uspete u ovoj aktivnosti, ne zaboravite o ovim programima. Na prvi pogled, mogu da izazovu početnik mirnom horor - to je previše slična programiranja! U stvari, možete nositi sa svim karakteristikama CSS pretprocesor za jedan dan, a ako pokušate, onda par sati. U budućnosti, oni će znatno pojednostaviti svoj život.

Kako je CSS pretprocesora

Da bi bolje razumjeli karakteristike ove tehnologije, ukratko udubi u povijesti vizualne prezentacije Web stranice.

Kada tek počela i masovne upotrebe interneta, nema stila listova nije postojao. Izvršenje dokumenata zavisio u potpunosti na preglednika. Svaki od njih je imao svoj stil, koji se koriste za liječenje određenih oznaka. U skladu s tim, stranice izgledaju drugačije u zavisnosti od reda u kojem pretraživač ih otvorite. Rezultat - kaos, konfuzija, problemi za programere.

1994. godine, norveški naučnik Håkon Lie razvio stila koji se može koristiti za izgled stranice odvojeno od HTML-dokumenta. Ideja priglanulas članovi W3C, koji je odmah krenuo u završetku. Nekoliko godina kasnije objavio je prvu verziju CSS specifikacije. Onda je ona stalno poboljšana, u završnoj fazi ... Ali koncept je ostao sve je isto: svaki stil postaviti određene osobine.

Koristeći CSS tablice je uvijek bila problematična. Na primjer, web dizajneri često imao problema sa sortiranje i grupiranje funkcija, a nasljedstvo nije tako jednostavno.

A onda je došao 2000.. Oznake se sve više počeo da se bavi profesionalno front-end programera, što je važno biti fleksibilan i dinamičan posao stilova. Postojale u vrijeme zahtijevao CSS prefikse postavljanje i praćenje podršku novih mogućnosti pretraživača. Tada, prema JavaScript i Ruby stručnjaci prionuli na posao, stvarajući pretprocesor - nadgradnja za CSS, nove funkcije se dodaju na njega.

CSS za početnike: pretprocesora funkcije

Oni imaju nekoliko funkcija:

• ujediniti prefiksi preglednik i kaki;

• pojednostaviti sintaksa;

• dati priliku da rade sa ugnježdene selektori bez grešaka;

• poboljšati logika stil.

Ukratko: preprocesora dodaje CSS programiranje logika mogućnosti. Sada, stil se ne vrši na uobičajeni popis stilova i sa nekoliko jednostavnih tehnika i pristupa: varijable, funkcije, hagfish, ciklusi uvjetima. Osim toga, sposobnost da koriste matematike.

Vidjevši popularnost tih dodataka, W3C su počeli postupno dodajte mogućnost da ih u CSS kod. Na primjer, u specifikaciji tako funkciju ima kamenca (), koji je podržan od strane mnogih pretraživača. Očekuje se da će uskoro biti moguće postaviti varijable i stvoriti hagfish. Međutim, to će se desiti u dalekoj budućnosti, i predprocesora već ovdje i već rade dobro.

Popularni predprocesora CSS. Sass

Dizajniran u 2007. godini. Prvobitno komponenta haml - predložak HTML. Nove funkcije za CSS elemenata kontrolirati uživao programera na Ruby on Rails, koji je počeo da se širi na sve strane. U Sass veliki broj funkcija koje su sada uključene u bilo pretprocesor: varijable, ugrađivanje selektora, (tada, međutim, ovi argumenti ne mogu biti dodan) hagfish.

Izjavljujući varijable u Sass

Varijable proglašen je znak $. Oni mogu održavati svoju imovinu i setove, na primjer: "$ borderSolid: 1px solid crvena;". U ovom primjeru, izjavio smo varijablu nazvanu borderSolid i spasio ga cijenimo 1px solid crveno. E sad, ako se u CSS je potrebno za stvaranje crvenih širinu granica 1px, jednostavno pokazuje da varijabla iza imena imovine. Nakon najave varijabli se ne mogu mijenjati. Postoji nekoliko ugrađene funkcije. Na primjer, proglasiti varijabla u iznosu od $ redcolor # FF5050. Sada, u CSS kod u svojstva bilo kojeg elementa, koristite ga postaviti boju slova: p {color: $ redColor; }. Da li želite eksperimentirati sa bojom? Koristite funkciju Darken ili razvedriti. To se radi tako: p {color: potamniti ($ redColor, 20%); }. Kao rezultat toga, redColor boja će biti 20% lakši.

U Sass mnoge ugrađene funkcije. Vrijedan najmanje ih čitaju, ali bolje - da uče.

gniježđenje

Ranije, da ukaže gniježđenje morala koristiti dugo i neugodno dizajn. Zamislite da imamo div, koji je p, i to, zauzvrat, set raspona. Za div, moramo postaviti font crvenu boju, za p - žuti, za raspon - roze. U tipičnom CSS da bi se radilo na sljedeći način:

div {

boja: crvena;

}

div P {

boja: žuta;

}

div p span {

boja: pink;

}

Sa CSS pretprocesor sve postaje lakše i kompaktan:

div {

boja: crvena;

P {

boja: žuta;

.span {

boja: pink;

}

}

}

Elementi doslovno "uložila" jedna od druge.

preprocesora direktive

Koristeći @import direktive mogu uvesti datoteke. Na primjer, imamo fonts.sass datoteku koja izjavljuje stilove za fontove. Spojite ga u glavnu datoteku style.sass: @import "fontovi". Gotovo! Umjesto jedne velike datoteke sa stilovima imamo nekoliko koji se mogu koristiti za brz i jednostavan pristup potrebna svojstva.

hagfish

Jedan od najzanimljivijih ideja. To omogućuje jednu liniju postaviti skup svojstava. Rade na sljedeći način:

@mixin largeFont {

font-family: 'Times New Roman';

font-size: 64px;

line-height: 80px;

font-weight: bold;

}

Hagfish da se prijave na element na stranici, koristite direktivu @include. Na primjer, želimo primijeniti ga na h1 zaglavlje. Imamo sljedeću strukturu: h1 {@include: largeFont; }

Sva svojstva hagfish su dodijeljeni H1 elementa.

preprocesora Manje

Sintaksa Sass podsjeća programiranja. Ako ste u potrazi za opciju koja je više prikladan za početnike proučavanje CSS, potražite za manje. Nastala je 2009. godine. Glavna karakteristika - podrška za CSS rodnom sintakse, tako da nisu upoznati s programiranjem Imposer to će biti lakše naučiti.

Varijable su proglašeni pomoću @ simbol. Na primjer: @fontSize: 14px;. Gniježđenja radova na istim principima kao u Sass. Hagfish su najavili kako slijedi: .largeFont () {font-family: 'Times New Roman'; font-size: 64px; line-height: 80px; font-weight: bold; }. Da biste se povezali to nije potrebno koristiti pretprocesor direktive - samo dodajte novostvorene hagfish u svojstvima odabranog elementa. Na primjer: H1 {.largeFont; }.

Stylus

Još jedan preprocesora. Stvorena u 2011. godini od istog autora, koji je dao svetu Jade, Express i druge korisne proizvode.

Varijable mogu biti proglašen na dva načina - direktno ili indirektno. Na primjer: font = 'Times New Roman'; - implicitna opciju. Ali $ font = 'Times New Roman' - jasan. Hagfish su proglašeni i implicitno povezani. Sintaksa je kako slijedi: redColor () boja crvena. Sada možemo dodati stavku, na primjer: H1 redColor ();.

Olovku na prvi pogled može izgledati neshvatljivo. Gdje je "autohtoni" konzole i zarezom? Ali je neophodno da zaroni u nju, sve postaje mnogo jasnije. Zapamtite, međutim, da dugoročni razvoj ovog pretprocesor može "odviknuti" koristite klasične CSS sintaksa. To ponekad stvara probleme kad ima da radi sa "čistim" stilu.

Šta preprocesora odabrati?

U stvari, to je ... to nije bitno. Sve verzije ponuditi oko iste karakteristike samo sintaksu svaki je drugačiji. Preporučujemo da postupite kako slijedi:

• ako - programer i žele da rade sa stilovima, kako u kodu, koristite Sass;
• Ako ste - koder i žele da rade sa stilovima kao i klasičan raspored, obratite pažnju na manje;
• ako volite minimalizam, koristite Stylus.

Za sve varijante beskrajne niz zanimljivih biblioteka koje mogu još više pojednostaviti razvoj. Korisnici Sass preporučuje da obrate pažnju na Compass - moćan alat sa mnogim ugrađenim funkcijama. Na primjer, nakon što ga instalirate nikada nećete morati brinuti o prefiksa dobavljača verziju. Pojednostavljuje rad sa mrežama. Postoje alati za rad sa cvijećem, sprites. Raspon već najavio hagfish. Daj ovaj alat za nekoliko dana - tako ćete uštedjeti puno vremena i truda u budućnosti.