Preprocessoru CSS: pregled, odabir, aplikacija

Apsolutno svi iskusni web dizajnera koristiti Preprocessoru. Ne postoje iznimke. Ako želite uspjeti u ovoj aktivnosti, ne zaboravite o tim programima. Na prvi pogled, oni mogu uzrokovati novajlija miran užas - to je previše sličan programiranje! U stvari, možete nositi sa svim značajkama CSS predprocesoru otprilike jedan dan, a ako pokušaš, onda par sati. U budućnosti, oni će znatno pojednostaviti svoj život.

Kako je CSS Preprocessoru

Da bi bolje razumjeli karakteristike ove tehnologije, ukratko zadubiti u povijesti vizualne prezentacije web stranica.

Kada tek počela masovna upotreba Interneta, bez stil listova ne postoji. Izvršenje dokumenata ovisio isključivo o pregledniku. Svaki od njih je imao svoje vlastite stilove koji su korišteni za liječenje određenih oznaka. U skladu s time, stranice izgledaju drugačije, ovisno o redoslijedu kojim preglednik ste ih otvorili. Rezultat - kaos, konfuzija, problemi za programere.

Godine 1994. norveški znanstvenik Håkon Laž razvio list stila koji bi se mogao koristiti za izgled stranice odvojeno od HTML-dokumenta. U ideja priglanulas članovi W3C koji je odmah na završetku. Nekoliko godina kasnije objavio je prvu verziju CSS specifikacije. Onda je ona stalno bila poboljšana, u završnoj fazi ... Ali koncept je ostao sve isto: svaki stil postaviti određena svojstva.

Korištenje CSS tablice je uvijek bio problematičan. Na primjer, web dizajneri često imao problema s sortiranje i grupiranje mogućnosti, i nasljeđe nije tako jednostavno.

A onda je došao dva tisućinku. Oznake sve više počeli baviti profesionalnim front-end developera, što je važno biti fleksibilan i dinamičan rad stilova. Postojala na plasman vrijeme zahtijevao CSS prefikse i praćenje podršku novim mogućnostima preglednika. Zatim, pomoću JavaScript i Ruby stručnjaci dobio dolje na posao, stvarajući Preprocessoru - nadgradnje za CSS, nove značajke su dodani na njega.

CSS za početnike: Preprocessor značajke

Oni imaju nekoliko funkcija:

• ujediniti prefikse preglednika i kaki;

• pojednostaviti sintaksu;

• dati priliku da rade sa ugniježđena selektora bez pogrešaka;

• poboljšati logika styling.

Ukratko: predprocesoru dodaje CSS programiranje logičkih sposobnosti. Sada, styling ne provodi na uobičajen popis stilova i nekoliko jednostavnih tehnika i pristupa: varijable, funkcije, sljepulje, ciklusi uvjetima. Osim toga, sposobnost da koriste matematiku.

Vidjevši popularnost tih dodataka, W3C su počeli postupno dodajte mogućnost da se u CSS kod. Na primjer, u specifikaciji pa izr () funkcije, koji je podržan od strane mnogih preglednika. Očekuje se da će uskoro će biti moguće postaviti varijable i stvoriti sljepulje. Međutim, to će se dogoditi u dalekoj budućnosti, a Predprocesori već ovdje i već rade dobro.

Popularno Predprocesori CSS. Sass

Dizajniran u 2007. godini. Izvorno komponenta Haml - predložak HTML. Nove značajke za CSS elemenata kontrole uživala programere na Ruby on Rails, koja se počela širiti posvuda. SRS ogroman broj mogućnosti koje su sada uključene u bilo predprocesoru: varijablama, ugradnja selektora, sljepulje (tada, međutim, ne može biti dodan ti argumenti).

Izjavljujući varijable u SRS

Varijable proglasila sa $ znak. Oni mogu održavati njihova svojstva i skupove, na primjer: "$ borderSolid: 1px solid red;". U ovom primjeru, izjavio smo varijablu nazvanu borderSolid i spasio ga cijenite 1 piksel crvena. Sada, ako u CSS moramo napraviti crveni širinu granici 1px, jednostavno pokazuje da varijabla nakon imena imovine. Nakon objave varijabli ne može mijenjati. Postoji nekoliko izgrađen-in funkcije. Na primjer, odredite varijablu u vrijednosti od $ redcolor # FF5050. Sada, u CSS kod u svojstvima bilo kojeg elementa, koristite ga postaviti boju fonta: P {color: $ redColor; }. Želite li eksperimentirati s bojama? Koristi funkcije posvijetlite ili olakšati. To se obavlja tako da: p {Boja: potamniti ($ redColor, 20%); }. Kao rezultat toga, redColor boja će biti 20% lakši.

SRS mnoge ugrađene funkcije. Vrijedi barem ih čitati, ali bolje - da uče.

traženje gnijezda

Prije toga, ukazati gniježđenje morali koristiti dugo i neugodno dizajn. Zamislite da imamo div, koji je p, au njemu je, pak, postaviti vijek. Za div, moramo postaviti boju fonta crvene, za p - žuto, za pedalj - ružičasta. U tipičnom CSS to će biti učinjeno kako slijedi:

div {

color: red;

}

div p {

Boja: žuta;

}

div p span {

boja: roza;

}

Sa CSS predprocesoru sve postaje lakše i kompaktnije:

div {

color: red;

p {

Boja: žuta;

{.span

boja: roza;

}

}

}

Elementi doslovno „uložio” jedni druge.

Preprocessor direktive

Korištenje @import direktive može uvesti datoteke. Na primjer, imamo fonts.sass datoteku koja proglašava stilove za fontova. Spojite ga na glavni file style.sass: @import „fontove”. Gotovo! Umjesto jedne velike datoteke sa stilovima imamo neke koji se može koristiti za brz i jednostavan pristup traženim svojstvima.

sljepulje

Jedan od najzanimljivijih ideja. To omogućuje jedan redak pitati niz svojstava. Djeluju na sljedeći način:

@mixin largeFont {

font-family: 'Times New Roman';

font-size: 64px;

linija visina: 80px;

font-weight: podebljano;

}

Sljepulje se primjenjuju na element na stranici, koristite direktivu @include. Na primjer, želimo ga primijeniti na h1 napadača. Imamo sljedeću strukturu: H1 {@include: largeFont; }

Sva svojstva sljepulje dodjeljuju H1 elementa.

Preprocessoru manje

Sintaksa Sass podsjeća programiranje. Ako ste u potrazi za opciju koja je više prikladan za početnike studiraju CSS, tražiti manje. Nastala je u 2009. Glavna značajka - Podrška za CSS rodnoj sintakse, tako upoznati s programskom varalica to će biti lakše učiti.

Varijable iskazuju pomoću @ znak. Na primjer: @fontSize: 14 piksela,. Gniježđenje radovi na istim principima kao u SRS. Sljepulje su najavili kako slijedi: .largeFont () {font-family: 'Times New Roman'; font-size: 64px; linija visina: 80px; font-weight: podebljano; }. Za spajanje nije potrebno koristiti Preprocessoru direktive - samo dodajte novostvorenu sljepulje u svojstvima odabranog elementa. Na primjer: H1 {.largeFont; }.

gramofonska igla

Još Preprocessoru. Objavljeno u 2011 od strane istog autora, koja je svijetu podarila Jade, Express i drugi proizvodi.

Varijable mogu biti proglašen na dva načina - bilo eksplicitno ili implicitno. Na primjer: font = 'Times New Roman'; - implicitna mogućnost. No $ font = 'Times New Roman' - jasan. Sljepulje deklarirane i implicitno povezani. Sintaksa je sljedeća: redColor () crvenu boju. Sada možemo dodati stavke, na primjer: h1 redColor ();.

Stylus na prvi pogled se može činiti neshvatljivo. Gdje je „izvorni” zagrade i zarezom? No, potrebno je uroniti u nju, sve postaje mnogo jasnije. Zapamtite, međutim, da je dugoročni razvoj ovog predprocesoru može „odviknuti” koristite klasični CSS sintaksa. To ponekad uzrokuje probleme kada moraju raditi s „čistim” stilu.

Što Preprocessoru odabrati?

U stvari, to je ... to ne smeta. Sve verzije nude oko iste značajke samo sintaksa svaki je drugačiji. Preporučujemo da postupite kako slijedi:

• ako - programer i želite raditi sa stilovima, kako u kodu, koristite SRS;
• ako - što je koder i žele raditi sa stilovima kao i kod konvencionalnog izgleda, obratite pozornost na manje;
• Ako vam se sviđa minimalizam pisaljkom.

Za sve varijante beskrajnog broja zanimljivih knjižnica koje se mogu dodatno pojednostaviti razvoj. Users Sass preporučuju da obratite pozornost na kompas - moćan alat s mnogim ugrađene značajke. Na primjer, nakon što ga instalirate nikada nećete morati brinuti o dobavljaču verzija prefiks. Pojednostavljuje rad s rešetkama. Postoje alati za rad s cvijećem, sprites. Raspon već najavio sljepulje. Dajte tom alatu par dana - na taj način ćete uštedjeti puno vremena i truda u budućnosti.