Popolnoma vsi izkušeni inštalaterji uporabljajo predprocesorje. Brez izjem. Če želite v tej dejavnosti uspeti, ne pozabite na te programe. Na prvi pogled lahko začetnika imenujejo tiho grozo - že je preveč podoben programiranju! Pravzaprav se lahko ukvarjate z vsemi zmogljivostmi predprocesorjev CSS približno en dan in če poskusite, potem za nekaj ur. V prihodnosti bodo močno poenostavili vaše življenje.

Kako so se pojavili predprocesorji CSS

Da bi bolje razumeli značilnosti te tehnologije, bomo na kratko predstavili zgodovino razvoja vizualne predstavitve spletnih strani. Ko se je začela množična uporaba interneta, ni bilo nobenih slogov. Obdelava dokumentov je bila v celoti odvisna od brskalnikov. Vsak od njih je imel svoje lastne sloge, ki so bili uporabljeni za ravnanje z določenimi oznakami. Zato so bile strani videti drugače, odvisno od brskalnika, v katerem ste jih odprli. Rezultat je kaos, zmedenost, težave za razvijalce.


Leta 1994 je norveški znanstvenik Hookon razvil list slog, s katerim bi lahko izgled strani ločili od dokumenta HTML. Zamisel so podprli predstavniki konzorcija W3C, ki se je takoj zavezal, da ga bodo dokončali. Nekaj ​​let kasneje je bila izdana prva različica specifikacije CSS. Potem je bila nenehno izpopolnjena, izpopolnjena. Ampak koncept je ostal enak: vsak slog ima določene lastnosti.Uporaba tabel CSS je vedno povzročala nekaj težav. Na primer, oblikovalci imajo pogosto težave z razvrščanjem in združevanjem lastnosti, pri dedovanju pa ni vse tako nedvoumno. In zdaj sta prišla dva tisoč. Oznako so vse bolj začeli uporabljati profesionalni razvijalci, za katere je bilo pomembno fleksibilno in dinamično delo s stili. Takrat je CSS zahteval postavitev predpone in sledenje podpori za nove zmogljivosti brskalnika. Potem so strokovnjaki za javascript in Ruby prevzeli zadevo z ustvarjanjem predprocesorjev - dodatkov za CSS, ki so mu dodali nove funkcije.

CSS za začetnike: značilnosti predprocesorjev

Izvajajo več funkcij:

poenotijo ​​predpone brskalnika in kaki;

poenostavitev skladnje;

omogočajo delo z vgrajenimi selektorji brez napak;

izboljša logiko stilizacije.

Kratek opis: Predprocesor doda logiko programiranja sposobnosti CSS. Zdaj se stilizacija ne izvaja z običajnim prenosom slogov, temveč z nekaj preprostimi tehnikami in pristopi: spremenljivkami, funkcijami, mešanicami, cikli, pogoji. Poleg tega je bila priložnost za uporabo matematike. Ko je videl priljubljenost teh dodatkov, je W3C začel postopoma dodajati svoje zmožnosti v kodo CSS. V specifikaciji se je na primer pojavila funkcija calc (), ki jo podpirajo številni brskalniki. Pričakuje se, da bo kmalu mogoče določiti spremenljivke in ustvariti miksiny. Vendar pa se bo to zgodilo v daljni prihodnosti, in preprocesorji so že tukaj in že odlično delo.

Priljubljeni predprocesorji CSS. Sass

Razvito leta 2007. Prvotno je bila komponenta Haml predloge HTML. Nove funkcije za upravljanje CSS elementov so prišli do sadnih razvijalcev na Ruby on Rails, ki se je začel širiti povsod. V Sassu je bilo veliko število funkcij, ki so zdaj vključene v kateri koli predprocesor: spremenljivke, selektorje prilog, miksin (potem pa niso mogli dodati argumentov).

Deklaracija spremenljivke v Sass

Spremenljivke so deklarirane s simbolom $. Lahko shranjujejo lastnosti in njihove nabore, na primer: "$ borderSolid: 1px solid red;". V tem primeru smo objavili spremenljivko, imenovano borderSolid, in shranili 1px trdno rdečo. Zdaj, če moramo v CSS ustvariti rdečo obrobo širine 1px, to preprosto določa to spremenljivko za ime lastnosti. Po deklaraciji spremenljivk ni mogoče spremeniti. Na voljo je več vgrajenih funkcij. Na primer, razglasimo $ redColor z vrednostjo # FF5050. Zdaj v kodi CSS, v lastnostih elementa, jo uporabimo za določitev barve pisave: p {color: $ redColor;}. Želite eksperimentirati z barvo? Uporabite funkcije, ki so temnejše ali svetlejše. To naredimo takole: p {color: temno ($ redColor, 20%);}. Posledično bo barva rdeče barve za 20% lažja. Sass ima veliko vgrajenih funkcij. Priporočamo vam, da se vsaj seznanite z njimi in jih po možnosti proučite.

Priloga

Prej je bilo treba za označevanje gnezdenja uporabiti dolge in nerodne modele. Predstavljajte si, da imamo div, v katerem leži p, in v njem, se nahaja, razpon. Za div moramo nastaviti barvo pisave rdeče, za p - rumeno, za razpon -klopi V običajnem CSS-u smo to naredili na naslednji način: div {barva: rdeča; } div p {barva: rumena; } div p span {barva: roza; } S predprocesorjem CSS je vse lažje in kompaktnejše: div {color: red; p {barva: rumena; .span {barva: roza; }}} Elementi so dobesedno "vdelani" drug na drugega.

Direktiva o predprocesorju

Datoteke lahko uvozite z uporabo direktive @import. Na primer, imamo datoteko fonts.sass, v kateri so deklarirani slogi pisav. Povežite ga z glavno datoteko style.sass: @import 'fonts'. Končano! Namesto ene velike slogi, imamo nekaj, ki jih lahko uporabite za hiter in preprost dostop do potrebnih lastnosti.

Miksini

Ena najbolj zanimivih idej. Omogoča eni vrstici, da poda niz lastnosti. Delujejo tako: @mixin bigFont {družina pisav: 'Times New Roman'; velikost pisave: 64px; line-height: 80px; font-weight: krepko; } Za uporabo miksina za postavko na strani uporabite direktivo @include. Na primer, želimo ga uporabiti v glavi h1. Dobimo naslednjo zasnovo: h1 {@include: largeFont;} Vse lastnosti mxina bodo dodeljene h1.

Preprocessor Less

Sintaksa Sass opozarja na programiranje. Če iščete možnost, ki je najbolj primerna za začetnike CSS, bodite pozorni na Less. Nastala je leta 2009. Glavna značilnost - podpora izvorne sintakse CSS, tako da ne poznajo programiranja tipk, bo lažje obvladati. Spremenljivke so deklarirane s simbolom @. Na primer: @fontSize: 14px;. Priloga deluje na enakih načelih kot v Sassu. Miksini so prijavljeni na naslednji način: .largeFont (){font-family: 'Times New Roman'; velikost pisave: 64px; line-height: 80px; font-weight: bold;}. Če se želite povezati, vam ni treba uporabljati smernic za predprocesor - dodajte sveže oblikovan miksin v lastnosti izbranega elementa. Na primer: h1 {.largeFont;}.

Stylus

Še en pretprocesor. Leta 2011 ga je ustvaril isti avtor, ki je svetu predstavil Jade, Express in druge uporabne izdelke. Spremenljivke lahko deklariramo na dva načina - eksplicitno ali implicitno. Na primer: font = 'Times New Roman'; - to je implicitna možnost. Toda $ font = 'Times New Roman' je očiten. Miksini so implicitno napovedani in povezani. Skladnja je: redColor () rdeča. Sedaj lahko dodate njegov element, na primer: h1 redColor ();. Na prvi pogled se Stylus zdi nejasen. Kje so starševski oklepaji in podpičja? Ampak vredno je le, da se potopi v to, vse postane veliko jasnejše. Vendar pa ne pozabite, da lahko dolgotrajni razvoj s tem predprocesorjem "opusti" uporabo klasične sintakse CSS. To včasih povzroča težave s potrebo po delu s "čistimi" slogi.

Kateri predprocesor izbrati?

Pravzaprav to ni pomembno. Vse možnosti omogočajo približno enake zmogljivosti, le sintaksa je različna za vse. Priporočamo, da naredite naslednje:

če ste programer in želite delati s stili, kot je koda, uporabite Sass;

če ste webmaster in želite delati s stili, kot je običajna postavitev, bodite pozorni na Less;

Če imate radi minimalizem, uporabite Stylus.

Za vse različice je ogromno zanimivih knjižnic, ki lahko dodatno poenostavijo razvoj.Sass uporabnikom svetujemo, naj bodo pozorni na kompas - močno orodje z veliko vgrajenimi funkcijami. Na primer, po namestitvi ne boste nikoli morali skrbeti s predponami dobavitelja. Poenostavljeno delo z mrežami. Obstajajo pripomočki za delo z barvami, duhovi. Na voljo je več že objavljenih mixinov. Dajte mu nekaj dni - tako boste prihranili veliko časa in truda v prihodnosti.