Preprocessor CSS: pregled, izbira, uporaba

Popolnoma vsi izkušeni oblikovalci postavitev uporabljajo preprocessors. Izjeme nimajo. Če želite v tej dejavnosti uspeti, ne pozabite na te programe. Na prvi pogled lahko povzročijo tiho grozo začetnika - to je preveč podobno programiranju! Dejansko lahko razumete vse zmogljivosti predprocesorjev CSS v približno enem dnevu, in če poskusite, potem pa v nekaj urah. V prihodnosti bodo bistveno poenostavili vaše življenje.

Kako so se pojavili predprocesorji CSS

Da bi bolje razumeli značilnosti te tehnologije, se na kratko potopimo v zgodovino razvoja vizualne predstavitve spletnih strani.

Ko se je masovna internetna aplikacija šele začela, ni bilo slogovnih listov. Zasnova dokumentov je odvisna samo od brskalnikov. Vsak od njih je imel lastne sloge, ki so bili uporabljeni za obdelavo določenih oznak. V skladu s tem so strani izgledale drugače, odvisno od brskalnika, v katerem ste jih odprli. Rezultat je kaos, zmedenost, težave za razvijalce.

Leta 1994 je norveški znanstvenik Haakon Lee izdelal slogovni list, ki bi ga lahko uporabili za oblikovanje videza strani ločeno od dokumenta HTML. Idejo so povabili predstavnikom konzorcija W3C, ki so takoj začeli z delom. Nekaj ​​let kasneje je bila objavljena prva različica specifikacije CSS. Potem se je nenehno izboljševala, dokončana je bila lahka - vendar je koncept ostal enak: vsak slog je dobil določene lastnosti.

Uporaba tabel CSS je vedno povzročila nekaj težav. Na primer, kodirnik je pogosto imel težave pri razvrščanju in združevanju lastnosti, dedovanje pa ni tako enostavno.

In potem je prišel dvaindvajseti. Strokovni sodelavci na čelu so začeli počasi označevati, za katere je bilo pomembno prožno in dinamično delo s slogi. CSS, ki je takrat obstajala, je zahtevala predpiksiranje in sledenje podpori za nove funkcije brskalnika. Potem so se strokovnjaki za jаvascript in Ruby spustili v podjetja, ustvarili preprocessors - dodatke za CSS, dodali mu nove funkcije.

CSS za začetnike: značilnosti predprocesorjev

Izvajata več funkcij:

• Združevanje predpon in brskalnikov brskalnika;
• poenostaviti sintakso;
• Dovolite, da delate z gnezdenimi izbirniki brez napak;
• izboljšati logiko stylinga.

Skratka: predprocesor dodaja programsko logiko CSS zmogljivosti. Zdaj styling ne izvaja običajno štetje stilov, temveč s pomočjo več preprostih tehnik in pristopov: spremenljivk, funkcij, myksinov, ciklov, pogojev. Poleg tega je bilo mogoče uporabiti matematiko.

Ko je videl priljubljenost takšnih dodatkov, je W3C začel postopoma dodajati funkcije iz njih v kodo CSS. Na primer, se je v specifikaciji pojavila funkcija calc (), ki jo podpirajo številni brskalniki. Pričakuje se, da bo kmalu mogoče nastaviti spremenljivke in ustvariti mioksine. Vendar se bo to zgodilo v oddaljeni prihodnosti, preprocessorji pa so že tu in že delajo popolnoma.

Priljubljeni CSS preprocessors. Sass

Razvit je bil leta 2007. Sprva je bila komponenta Haml, HTML predloge motorja. Nove funkcije za manipulacijo s CSS elementi so prišli do okusa Ruby on Rails razvijalcev, ki so jo začeli distribuirati povsod. V Sassu se je pojavilo veliko možnosti, ki so sedaj vključene v predprocesor: spremenljivke, izbirne vdelke, mešane (potem pa jim ni bilo mogoče dodati argumentov).

Deklariranje spremenljivk v Sassu

Spremenljivke so razglašene z znakom $. V njih lahko shranjujete lastnosti in njihove nastavitve, na primer: "$ borderSolid: 1px solid red;". V tem primeru smo prijavili spremenljivko, imenovano borderSolid, in shranila vrednost 1px, ki je bila v njej solidna rdeča. Zdaj, če v CSS moramo ustvariti rdečo mejo s širino 1px, preprosto podajamo to spremenljivko po imenu lastnine. Po deklaraciji spremenljivk ni mogoče spremeniti. Na voljo je več vgrajenih funkcij. Na primer, razglasi spremenljivko $ redColor z vrednostjo # FF5050. Zdaj, v CSS, v lastnostih elementa ga uporabimo, da določimo barvo pisave: p {color: $ redColor-}. Ali želite preizkusiti barvo? Uporabite funkcije, ki so temne ali osvetljene. To je storjeno tako: p {barva: temna ($ redColor, 20%) -}. Zaradi tega bo barva redColor 20% lažja.

Sass ima veliko vgrajenih funkcij. Priporočamo, da se vsaj spoznate z njimi in bolje - naučite se.

Nesting

V preteklosti smo za gnezdenje morali uporabljati dolge in neprijetne konstrukcije. Predstavljajte si, da imamo div, v katerem p leži, in v njem pa je razpon. Za div moramo nastaviti barvo pisave na rdečo, za p-rumeno, za razpon-roza. V navadnem CSS-ju bi to bilo storjeno tako:

div {

barva: rdeča;

}

div p {

barva: rumena;

}

div p span {

barva: roza;

}

S predprocesorjem CSS je vse preprosto in bolj kompaktno:

div {

barva: rdeča;

p {

barva: rumena;

.span {

barva: roza;

}

}

}

Elementi se dobesedno »dajo« v drugega.

Preprocesorske direktive

Z direktivo @import lahko uvozite datoteke. Na primer, imamo datoteko fonts.sass, v kateri so deklarirani slogi za pisave. Povezujemo jo z glavno datoteko style.sass: @import lsquo-fontsrsquo-. Dokončano! Namesto ene velike datoteke s slogi imamo nekaj, s katerimi lahko hitro in enostavno dostopate do zahtevanih lastnosti.

Mixins

Eden izmed najbolj zanimivih zadumokov. Omogoča, da se en niz njenih lastnosti določi v eni vrstici. Delajte na naslednji način:

@mixin largeFont {

font-family: lsquo-Times New Romanrsquo-;

font-size: 64px;

line-height: 80px;

font-weight: bold;

}

Če želite uporabiti mixin elementu na strani, uporabite direktivo @include. Na primer, želimo jo uporabiti v glavi h1. Pridobiva se naslednja konstrukcija: h1 {@ključek: velikiFont-}

Vse lastnosti mešanice bodo dodeljene elementu h1.

Manj preprocesor

Sassax Sass spominja na programiranje. Če iščete možnost, ki je bolj primerna za začetnike CSS študentov, bodite pozorni na manj. Ustanovljen je bil leta 2009. Glavna značilnost je podpora za izvorno sintakso CSS, zato je lažje izvedeti za tiste, ki niso seznanjeni s programiranjem.

Spremenljivke so označene s simbolom @. Na primer: @fontSize: 14px; Nesting deluje na enakih načelih kot v Sassu. Mešanice so deklarirane na naslednji način: .largeFont () {font-family: lsquo-Times New Romanrsquo-- velikost pisave: 64px; line-height: 80px; font-teža: krepko-}. Za povezavo vam ni treba uporabljati predpogojnih direktiv - samo dodajte sveže ustvarjen mixin lastnosti izbranega elementa. Na primer: h1 {.largeFont-}.

Stylus

Še en predprocesor. Ustvaril je leta 2011 isti avtor, ki je dal svetu Jade, Express in druge uporabne izdelke.

Spremenljivke je mogoče razglasiti na dva načina - eksplicitno ali implicitno. Na primer: font = lsquo-Times New Romanrsquo-- je implicitna možnost. Ampak $ font = lsquo-Times New Romanrsquo-eksplicitno. Mešanice so deklarirane in povezane implicitno. Sintaksa je: redColor () barva rdeča. Zdaj ga lahko dodamo elementu, na primer: h1 redColor () -.

Na prvi pogled se Stylus morda zdi nerazumljiv. Kje so "domači" oklepaji in podpičji? Ampak to je potrebno samo potopiti v to, saj vse postane bistveno bolj jasno. Vendar ne pozabite, da lahko dolgotrajen razvoj s tem preprocessorom "odvrne" uporabo klasične CSS sintakse. To včasih povzroča težave, ko morate delati s "čistimi" slogi.

Kateri predprocesor bi moral izbrati?

Dejstvo je, da to ni pomembno. Vse možnosti ponujajo enake možnosti, le sintakso vsakega je drugačna. Priporočamo vam, da ukrepate na naslednji način:

• če ste programer in želite delati s slogi kot kodo, uporabite Sass;
• če ste oblikovalec postavitve in želite delati s slogi, kot pri običajnem postavitvi, bodite pozorni na manj;
• če želite minimalizem, uporabite Stylus.

Za vse možnosti je na voljo ogromno število zanimivih knjižnic, kar lahko dodatno poenostavi razvoj. Uporabnikom družbe Sass svetujemo, da pozorno spremljate Compass - zmogljivo orodje z mnogimi vgrajenimi funkcijami. Na primer, po namestitvi vam nikoli ne bo treba skrbeti za predpono prodajalca. Preprostejše delo z mrežami. Obstajajo pripomočki za delo z barvami, sprites. Na voljo so številni že prijavljeni miksi. Dajte to orodje nekaj dni - s tem boste prihranili veliko časa in energije v prihodnosti.