Preprocessor CSS: pārskats, atlase, pieteikums

Pilnīgi visi pieredzējušu web dizaineri izmantot apstrādātāju. Nav izņēmumi. Ja jūs vēlaties gūt panākumus šajā pasākumā, neaizmirstiet par šīm programmām. Pēc pirmā acu uzmetiena, tie var izraisīt iesācēju klusu šausmas - tas ir pārāk līdzīgs programmu! Patiesībā, jūs varat tikt galā ar visām pazīmēm CSS apstrādātāju par dienu, un, ja jūs mēģināt, tad pāris stundas. Nākotnē, tie būs ievērojami vienkāršot savu dzīvi.

Kā radās CSS apstrādātāju

Lai labāk izprastu īpašības šīs tehnoloģijas, īsi ienirt vēsturē vizuālo noformējumu Web lapām.

Ja ir tikai tikko sākusies masveida interneta lietošanu, ne stila lapas nav. Izpilde Dokumentu atkarīga tikai uz pārlūku. Katra no tām bija savi stili, kas ir izmantoti, lai ārstētu konkrētu tagus. Attiecīgi, lapas izskats var atšķirties atkarībā no rīkojuma, kurā pārlūkprogrammu atvērt. Rezultātā - haosu, apjukums, problēmas izstrādātājiem.

1994. gadā, norvēģu zinātnieks Håkon Lie izstrādājusi stila lapas, kas varētu tikt izmantots, lai izskatu lapas atsevišķi no HTML dokumentā. Ideja priglanulas locekļi W3C, kurš uzreiz izklāstīts līdz galam. Dažus gadus vēlāk viņš publicēja pirmo versiju CSS specifikācijai. Tad viņa tika nemitīgi pilnveidota, tiek pabeigts ... Bet koncepcija palika visi vienādi: katrs stils noteikt konkrētus īpašības.

Izmantojot CSS tabulām vienmēr ir bijusi problemātiska. Piemēram, web dizaineri bieži bija problēmas ar šķirošanas un grupēšanas funkcijas, un mantojuma nav tik vienkārši.

Un tad nāca divi tūkstošdaļa. Marķējums arvien sāka nodarboties ar profesionālo front-end izstrādātājiem, kas ir svarīgi, lai būtu elastīga un dinamiska darba stilu. Pastāvēja brīdī pieprasīja CSS salikteņiem izvietošanas un uzskaites atbalstu jaunās iespējas pārlūku. Tad ar JavaScript, un Ruby eksperti dabūja uz leju, lai biznesā, radot apstrādātāju - augšdaļu CSS, jaunas funkcijas ir pievienoti.

CSS iesācējiem: apstrādātāju funkcijas

Viņiem ir vairākas funkcijas:

• apvienot pārlūka prefiksus un haki;

• vienkāršotu sintaksi;

• dod iespēju strādāt ar ligzdotu pārslēdzējiem bez kļūdām;

• uzlabot loģika stilu.

Īsumā: apstrādātāju piebilst CSS programmēšanas loģiskās spējas. Tagad stils netiek veikta parastajā sarakstā stilu un ar dažiem vienkāršiem paņēmieniem un metodēm: mainīgie, funkcijas, miksīnu, cikli nosacījumiem. Turklāt iespēja izmantot matemātiku.

Redzot popularitāti šo add-ins, W3C ir sākuši pakāpeniski pievieno iespēju tiem CSS kodu. Piemēram, specifikācijā tāpēc calc () funkciju, ko atbalsta daudzas pārlūkiem. Ir sagaidāms, ka drīzumā būs iespējams noteikt mainīgos un izveidot miksīnu. Tomēr tas notiks tālā nākotnē, un preprocessors jau šeit un jau strādā labi.

Popular preprocessors CSS. Sass

Izstrādāts 2007. gadā. Sākotnēji sastāvdaļa Haml - veidni HTML. Jaunas funkcijas CSS elementiem kontrolēt paticis izstrādātājiem par Ruby on Rails, kas sāka izplatīt to visur. Sass milzīgs vairākas funkcijas, kas tagad ir iekļautas kādā apstrādātāju:, miksīnu (tad, tomēr, šie argumenti nevar tikt pievienots) mainīgajiem, iestrādājot selektori.

Pasludina mainīgie Sass

Mainīgie deklarēts ar $ zīmi. Viņi var uzturēt savus īpašumus un komplekti, piemēram: "$ borderSolid: 1px sarkani;". Šajā piemērā mēs paziņoja mainīgo sauc borderSolid un saglabāti tā vērtību 1px sarkani. Tagad, ja CSS mums ir nepieciešams, lai izveidotu sarkanu apmales platums 1px, vienkārši norāda, ka mainīgo pēc īpašuma nosaukumu. Pēc paziņojuma par mainīgo nevar mainīt. Ir vairākas iebūvētās funkcijas. Piemēram, deklarēt mainīgo ar vērtību $ redcolor # FF5050. Tagad, CSS kodu īpašībām jebkura elementa, izmantojiet to, lai uzstādītu fonta krāsu: P {krāsa: $ redColor; }. Vai vēlaties eksperimentēt ar krāsu? Izmanto funkciju tumšāku vai gaišāku. Tas tiek darīts, lai: p {krāsa: tumšākas ($ redColor, 20%); }. Tā rezultātā, krāsa redColor būs par 20% vieglāks.

Par SASS daudz iebūvētās funkcijas. Vērts vismaz tos lasīt, bet labāk - mācīties.

ligzdošanas

Iepriekš, lai norādītu ligzdojošo nācās izmantot garš un neērti dizainu. Iedomājieties, ka mums ir div, kas ir p, un tajā, savukārt, noteikts posmu. Par div, mums ir nepieciešams, lai uzstādītu fonta krāsu sarkans, jo p - dzeltena, lai span - rozā. In tipisks CSS tas būtu jādara šādi:

div {

krāsa: sarkana;

}

div p {

krāsa: dzeltena;

}

div p span {

krāsa: rozā;

}

Ar CSS apstrādātāju viss kļūst vieglāk un kompakts:

div {

krāsa: sarkana;

p {

krāsa: dzeltena;

.span {

krāsa: rozā;

}

}

}

Elements burtiski "ieguldīja" viens otru.

apstrādātāju direktīvas

Izmantojot @import direktīvas var importēt failus. Piemēram, mums ir fonts.sass fails, kas deklarē stilu fontu. Pievienojiet to galveno failu style.sass: @import "fontus." Gatavs! Tā vietā, lai vienu lielu failu ar stiliem mums ir maz, ko var izmantot, lai ātri un viegli piekļūt nepieciešamajiem īpašībām.

miksīnu

Viens no visvairāk interesantas idejas. Tas ļauj vienu rindiņu uzdot kopu īpašībām. Darboties šādi:

@mixin largeFont {

fontu saime: "Times New Roman";

font-size: 64px;

line-augstums: 80px;

font-weight: bold;

}

Miksīnu piemērot elementu lapā, izmantojiet direktīvu @include. Piemēram, mēs gribam piemērot to h1 galvenes. Mums ir šāda struktūra: H1 {@include: largeFont; }

Visas īpašības miksīnu tiek piešķirts h1 elementu.

apstrādātāju Mazāk

Sintakse Sass atgādina programmēšanu. Ja jūs meklējat iespēju, kas ir vairāk piemērots iesācējiem studē CSS, meklēt mazāk. Tā tika izveidota 2009. gadā. Galvenā iezīme - atbalsts CSS dzimtajā sintaksi, tāpēc pazīstami ar programmēšanas Imposer būs vieglāk iemācīties.

Mainīgie tiek deklarēts, izmantojot @ simbolu. Piemēram: @fontSize: 14px;. Ligzdošanas darbi par tiem pašiem principiem, kā tas ir Sass. Miksīnu tiek paziņoti šādi: .largeFont () {fontu saime: "Times New Roman"; font-size: 64px; line-augstums: 80px; font-weight: bold; }. Lai pievienotu tas nav nepieciešams izmantot apstrādātāju direktīvas - vienkārši pievienojiet jaunizveidoto miksīnu ar īpašībām izvēlētā elementa. Piemēram: h1 {.largeFont; }.

irbulis

Vēl apstrādātāju. Izveidots 2011. gadā, ko pats autors, kas deva pasaulei Jade, Express un citus noderīgus produktus.

Mainīgie var pasludināt divos veidos - vai nu tieši, vai netieši. Piemēram: fonts = "Times New Roman"; - netieši iespēja. Bet $ font = "Times New Roman" - skaidrs. Miksīnu tiek deklarēta un netieši saistīti. Sintakse ir šāda: redColor () sarkano krāsu. Tagad mēs varam pievienot objektu, piemēram: h1 redColor ().

Irbulis pirmajā mirklī var šķist nesaprotami. Kur ir "native" iekavās un semikoliem? Bet tas ir nepieciešams, lai ienirt tajā, viss kļūst daudz skaidrāks. Tomēr atcerieties, ka ilgtermiņa attīstībai šajā apstrādātāju var "atradināt", jūs izmantojat klasisko CSS sintakse. Tas dažreiz rada problēmas, kad, kam, lai strādātu ar "tīru" stilā.

Kas apstrādātāju izvēlēties?

Faktiski, tas ir ... tas nav svarīgi. Visas versijas piedāvā par tās pašas funkcijas tikai sintakse katrs ir atšķirīgs. Mēs iesakām rīkoties šādi:

• ja - programmētājs un vēlas strādāt ar stiliem gan kodu, izmantojiet Sass;
• Ja jūs - coder un vēlas strādāt ar stiliem, jo ar parasto izkārtojumu, pievērst uzmanību mazāk;
• ja jums patīk minimālisms, izmantojiet irbuli.

Visiem variantiem nebeidzamu skaitu interesantu bibliotēku, kas var vēl vairāk vienkāršot attīstību. Lietotāji Sass ieteicams pievērst uzmanību Compass - spēcīgs instruments ar daudzām iebūvētās funkcijas. Piemēram, pēc tam, kad jūs instalējiet to, jums nekad nav jāuztraucas par to, pārdevējs versija prefiksu. Vienkāršo strādā ar tīkliem. Ir instrumenti darbam ar ziediem, sprites. Diapazons jau paziņoja miksīnu. Dodiet Šis rīks pāris dienām - tādējādi jūs ietaupīsiet daudz laika un pūļu nākotnē.