Preprocessor CSS: pregled, izbira, uporaba

Absolutno vsi izkušeni oblikovalci spletnih uporabo predprocesorjev. Ni izjem. Če želite uspeti v tej dejavnosti, ne pozabite na teh programih. Na prvi pogled lahko povzroči novice tiho grozo - to je preveč podobna programiranju! V bistvu, lahko se ukvarjajo z vsemi značilnostmi CSS Preprocessor za približno en dan, in če poskusite, nato pa nekaj ur. V prihodnosti bodo bistveno poenostavi vaše življenje.

Kako je CSS predprocesorjev

Da bi bolje razumeli značilnosti te tehnologije, na kratko jama v zgodovini vizualne predstavitve spletnih strani.

Ko se šele začeli množično uporabo interneta, ne obstaja nobena slogov. Izvedba dokumentov v celoti odvisna od brskalnika. Vsak od njih je imel svoje stile, ki so bili uporabljeni za zdravljenje nekaterih oznak. Skladno strani razlikuje glede na vrstni red, v katerem brskalnik jih odprli. Rezultat - kaos, zmedenost, težave za razvijalce.

Leta 1994 je norveški znanstvenik Håkon Lie razvili slog stanja, ki se lahko uporablja za pojav strani ločeno od HTML-dokument. Ideja priglanulas Člani W3C, ki je takoj določen do konca. Nekaj let kasneje je izdal prvo različico specifikacije CSS. Potem je bila nenehno izboljšuje, se dokončno ... Ampak koncept ostaja vse isto dokumentu: vsak slog nastaviti določene lastnosti.

Uporaba CSS tabele je vedno problematična. Na primer, spletni oblikovalci pogosto imeli težave z razvrščanjem in združevanje funkcij in dedovanje ni tako preprosta.

In potem je prišel dve tisočinki. Oznake so vse bolj začeli sodelovati v strokovnih razvijalci front-end, kar je pomembno, da so fleksibilni in dinamični delovni stili. Obstajala na umestitev v čas zahteval CSS predpone in sledenje podporo nove zmogljivosti brskalnika. Nato ga JavaScript in Ruby strokovnjaki dobil na posel, ki ustvarja predprocesorjev - Karoserija za CSS, so nove funkcije dodajo z njo.

CSS za začetnike: Preprocessor funkcije

Imajo več funkcij:

• poenotenje brskalnika predpon in kaki;

• poenostaviti skladnjo;

• dati priložnost za delo z ugnezdenih selektorjev brez napak;

• izboljšanje logični styling.

Skratka: Predprocesor dodaja CSS programiranje logičnih sposobnosti. Zdaj je styling ne izvaja v običajnem seznamu stilov in z nekaj preprostimi tehnikami in pristopi: spremenljivke, funkcije, glenavic, ciklov pogoji. Poleg tega možnost uporabe matematike.

Videti priljubljenost te dodatke, ki so W3C začeli postopoma dodamo možnost, da jih v kodo CSS. Na primer, v specifikaciji, da tam funkcijo Calc (), ki je podprta s številnimi brskalniki. Pričakuje se, da bo kmalu mogoče določiti spremenljivke in ustvariti glenavic. Vendar pa se bo to zgodilo v bližnji prihodnosti, in predprocesorjev že tu in že dobro delujejo.

Popular predprocesorjev CSS. Sass

Oblikovan v letu 2007. Prvotno sestavni Haml - predlogo HTML. Nove funkcije za CSS elementov nadzor užival razvijalcem na Ruby na tirih, ki se je začela, da se širi povsod. Sass veliko število funkcij, ki so sedaj vključeni v vsakem Preprocessor: spremenljivke, vgrajevanje selektorjev, (potem, pa ni mogoče dodati te trditve) glenavic.

Razglašajo spremenljivke v Sass

Spremenljivke razglasila znak $. Ti lahko ohranijo svoje lastnosti in sklopov, na primer: "$ borderSolid: 1px trdno rdeče;". V tem primeru smo razglasila spremenljivko borderSolid in shranijo, da vrednost 1px rdeče. Zdaj, če bomo v CSS morali ustvariti rdečo obrobo širine 1px, preprosto pomeni, da je spremenljivka za imenom lastnine. Po objavi spremenljivk ni mogoče spremeniti. Obstaja več vgrajenih funkcij. Na primer, razglasi spremenljivko z vrednostjo $ redcolor # FF5050. Zdaj, v kodo CSS v lastnosti vseh elementov, jo uporabite, da nastavite barvo pisave: P {barva: $ redColor; }. Ali želite, da eksperimentirate z barvo? Uporabite funkcijo Posvetlite ali potemnite. To se naredi tako: p {barva: potemni ($ redColor, 20%); }. Posledično bo barva redColor 20% lažji.

Številne vgrajene funkcije Sass. Vredno jih vsaj prebral, vendar je bolje - da se naučijo.

gnezda

Prej, navesti gnezdenje moral uporabiti dolgo in neprijetno design. Predstavljajte si, da imamo div, ki je na strani, in v njem, po drugi strani, je določeno dobo. Za div, moramo nastaviti barvo pisave rdeča, za p - rumena, za dobo - roza. V tipično CSS bi bilo narejeno, kot sledi:

div {

Barva: rdeča;

}

div p {

Barva: rumena;

}

div p span {

Barva: roza;

}

Z CSS Preprocessor vse postane lažje in bolj kompaktna:

div {

Barva: rdeča;

p {

Barva: rumena;

.span {

Barva: roza;

}

}

}

Elementi dobesedno "vložili" drug drugega.

direktive Preprocessor

Uporaba direktive @import lahko uvozite datoteke. Na primer, imamo fonts.sass datoteko, ki izjavlja, sloge za pisave. ga priključite na glavno datoteke style.sass: @import "pisave". Končano! Namesto ene same velike datoteke s slogi imamo nekaj, ki se lahko uporablja za hiter in enostaven dostop do zahtevanih lastnosti.

glenavic

Ena izmed najbolj zanimivih idej. Omogoča eno vrstico, da zahteva niz lastnosti. Delujejo na naslednji način:

@mixin largeFont {

font-družina: "Times New Roman";

font-size: 64px;

vrstica-višina: 80px;

font-weight: bold;

}

Glenavic uporablja za element na strani, uporabite direktivo @include. Na primer, želimo, da ga uporabljajo za glavo h1. Imamo naslednjo strukturo: H1 {@include: largeFont; }

Vse lastnosti glenavic so dodeljena h1 element.

Predprocesor Manj

Sintaksa Sass opozarja programiranja. Če iščete za možnost, ki je bolj primeren za začetnike, ki študirajo CSS, poglej za manj. Ustanovljeno je bilo leta 2009. Glavna značilnost - podpora za CSS maternem sintakse, zato ne poznajo programsko Nametljivac bo lažje, da se naučijo.

Spremenljivke deklarirano uporabo simbol @. Na primer: @fontSize: 14px;. Gnezda dela na istih načelih kot v Sass. Glenavic so objavljeni na naslednji način: .largeFont () {font-družina: "Times New Roman"; font-size: 64px; vrstica-višina: 80px; font-weight: bold; }. Za priključitev ni treba uporabljati napotke Preprocessor - dodajte novo ustvarjeno glenavic v lastnosti izbranega elementa. Na primer: h1 {.largeFont; }.

Stylus

Druga Predprocesor. Created leta 2011, ki ga je istega avtorja, ki je dal svet Jade, Express in druge uporabne izdelke.

Spremenljivke se lahko prijavi na dva načina - bodisi neposredno ali posredno. Na primer: pisave = "Times New Roman"; - implicitna možnost. Toda $ font = "Times New Roman" - jasno. Glenavic so prijavljeni in posredno povezani. Skladnja je naslednja: redColor () rdeče barve. Sedaj lahko dodamo element, na primer: h1 redColor ().

Pisalo na prvi pogled morda zdi nerazumljivo. Kje je "naravni" nosilci in podpičja? Vendar pa je potrebno, da se potopite v to, vse postane veliko bolj jasno. Ne pozabite pa, da lahko dolgoročen razvoj tega Preprocessor "Otrok" uporabljate klasično CSS sintakso. To včasih povzroča težave, ko bi morali delati s "čisto" stil.

Kaj Predprocesor izbrati?

Dejstvo je, da je ... ni važno. Vse različice ponujajo približno enake funkcije, samo sintaksa je vsak drugačen. Priporočamo, da se nadaljuje, kot sledi:

• če - programer in želijo delati s slogi tako v kodo, uporabite Sass;
• če je: - zbornik in želijo delati s stili, kot s konvencionalno obliko, bodite pozorni na manj;
• Če vam je všeč minimalizem, s pisalom.

Pri vseh različicah neskončno število zanimivih knjižnic, ki lahko še dodatno poenostavijo razvoj. Uporabniki Sass priporoča, naj bodo pozorne na Compass - močno orodje, s številnimi vgrajenih elementov. Na primer, po namestitvi vam nikoli ne bo treba skrbeti za prodajalca različica predponi. Poenostavlja delo z omrežji. Obstajajo orodja za delo s cvetjem, sprites. Razpon že napovedal glenavic. Daj to orodje za nekaj dni - tako boste prihranili veliko časa in truda v prihodnosti.