Абсолютно все опытные верстальщики используют priekšapstrādātāji. Nav izņēmumu. Ja vēlaties gūt panākumus šajā darbībā, neaizmirstiet par šīm programmām. No pirmā acu uzmetiena tie var izraisīt klusas iesācēju šausmas - tas jau ir pārāk daudz kā programmēšana! Faktiski visas CSS priekšapstrādātāju funkcijas var izdomāt apmēram dienā, un, ja mēģināt, tad pāris stundās. Nākotnē tie ievērojami vienkāršos jūsu dzīvi.
Lai labāk izprastu šīs tehnoloģijas iespējas, īsi ienāciet tīmekļa lapu vizuālās noformējuma attīstības vēsturē.
Когда только-только началось массовое применение Internets, stila lapu nebija. Papīra darbs bija atkarīgs tikai no pārlūkprogrammām. Katram no viņiem bija savi stili, kurus izmantoja noteiktu tagu apstrādei. Attiecīgi lapas izskatījās atšķirīgi atkarībā no tā, kurā pārlūkprogrammā jūs tās atvērāt. Rezultāts ir haoss, apjukums, problēmas izstrādātājiem.
1994. gadā attīstījās norvēģu zinātnieks Hakons Līstila lapa, kuru var izmantot, lai veidotu lapas izskatu atsevišķi no HTML dokumenta. Ideju uzaicināja W3C konsorcija pārstāvji, kuri nekavējoties ķērās pie tā pabeigšanas. Pēc vairākiem gadiem tika izlaista pirmā CSS specifikācijas versija. Tad tas tika pastāvīgi uzlabots, pilnveidots ... Bet koncepcija palika nemainīga: katram stilam tiek piešķirtas noteiktas īpašības.
CSS tabulu izmantošana vienmēr ir bijusi problēma. Piemēram, maketētājiem bieži bija grūtības ar īpašību šķirošanu un grupēšanu, un pat ar mantojumu ne viss ir tik vienkārši.
Un tad nāca divi tūkstoši. Ar marķēšanu sāka nodarboties arvien vairāk profesionālu front-end izstrādātāju, kuriem svarīgs bija elastīgs un dinamisks darbs ar stiliem. Tajā laikā esošajai CSS bija nepieciešams prefiksu un izsekošanas atbalsts jaunām pārlūka funkcijām. Tad JavaScript un Ruby speciālisti ķērās pie biznesa, izveidojot priekšapstrādes procesorus - CSS papildinājumus, kas tam pievieno jaunas funkcijas.
Viņiem ir vairākas funkcijas:
Īsumā: pirmapstrādes procesors CSS iespējām pievieno programmēšanas loģiku. Tagad stilu veic nevis parastais stilu uzskaitījums, bet gan ar vairāku vienkāršu paņēmienu un pieeju palīdzību: mainīgie, funkcijas, miksi, cilpas, apstākļi. Turklāt kļuva iespējams izmantot matemātiku.
Redzot šādu papildinājumu popularitāti, W3C sākāspakāpeniski pievienojiet šo funkciju savam CSS kodam. Piemēram, specifikācijā parādījās funkcija calc (), kuru atbalsta daudzas pārlūkprogrammas. Paredzams, ka drīz būs iespējams iestatīt mainīgos un izveidot miksus. Tomēr tas notiks tālā nākotnē, un priekšapstrādātāji jau ir šeit un jau strādā lieliski.
Izstrādāts 2007. gadā. Sākotnēji HTML veidņu motora Haml sastāvdaļa. Ruby on Rails izstrādātāji izbaudīja jaunās iespējas manipulēt ar CSS elementiem un sāka to izplatīt visur. Sass ir milzīgs skaits funkciju, kas tagad ir iekļautas jebkurā priekšapstrādes procesorā: mainīgie, ligzdojošie selektori, mikseri (tad jūs tos nevarējāt pievienot argumentiem).
Mainīgie tiek deklarēti, izmantojot $ zīmi. Viņi var saglabāt rekvizītus un to kopas, piemēram: “$ borderSolid: 1px solid red;”. Šajā piemērā mēs esam deklarējuši mainīgo ar nosaukumu borderSolid un saglabājuši to kā 1px vienkrāsainu sarkanu. Ja CSS mums ir jāizveido 1 pikseļu plata sarkana apmale, mēs vienkārši norādām šo mainīgo pēc rekvizīta nosaukuma. Pēc deklarēšanas mainīgos nevar mainīt. Ir pieejamas vairākas iebūvētās funkcijas. Piemēram, paziņosim mainīgo $ redColor ar vērtību # FF5050. Tagad CSS kodā kāda elementa īpašībās mēs to izmantojam, lai iestatītu fonta krāsu: p {color: $ redColor; }. Vai vēlaties eksperimentēt ar krāsu? Izmantojiet tumšākas vai gaišākas funkcijas. Tas tiek darīts šādi: p {color: darken ($ redColor, 20%); }. Tas padarīs redColor par 20% gaišāku.
Sass ir daudz iebūvētu funkciju. Mēs iesakām jums vismaz iepazīties ar viņiem, un labāk - iemācīties.
Iepriekš, lai norādītu uz ligzdošanu, tas bija jādaraizmantojiet garus un neērtus dizainus. Iedomājieties, ka mums ir div, kurā ir p, un tas, savukārt, satur span. Div: mums jāiestata fonta krāsa sarkanai, p - dzeltenai, span - rozā krāsai. Normālā CSS tas tiktu darīts šādi:
div {
krāsa: sarkana;
}
div p {
krāsa: dzeltena;
}
div p span {
krāsa: rozā;
}
CSS pirmapstrādes process visu padara vienkāršāku un kompaktāku:
div {
krāsa: sarkana;
p {
krāsa: dzeltena;
.span {
krāsa: rozā;
}
}
}
Elementi burtiski ir ligzdoti viens otrā.
Izmantojot @import direktīvu, jūs varat importētfailus. Piemēram, mums ir fails fonts.sass, kas nosaka fontu stilus. Mēs to iekļaujam galvenajā style.sass failā: @import ‘fonts’. Gatavs! Viena liela stila faila vietā mums ir vairāki, kurus mēs varam izmantot, lai ātri un ērti piekļūtu vēlamajiem īpašumiem.
Viena no interesantākajām idejām. Ļauj vienā rindā iestatīt visu rekvizītu kopu. Viņi strādā šādi:
@mixin largeFont {
font-family: ‘Times New Roman’;
fonta lielums: 64 pikseļi;
līnijas augstums: 80 pikseļi;
fonta svars: treknrakstā;
}
Lai lietotu mixin elementu lapā, izmantojiet direktīvu @include. Piemēram, mēs vēlamies to piemērot virsrakstam h1. Izrādās šāda konstrukcija: h1 {@include: largeFont; }
Visas īpašības no miksina tiks piešķirtas h1 elementam.
Sass sintakse atgādina programmēšanu. Ja meklējat iespēju, kas vairāk piemērota iesācējiem CSS audzēkņos, apskatiet Mazāk. Tas tika izveidots 2009. gadā. Galvenā iezīme ir atbalsts vietējai CSS sintaksei, tāpēc maketētājiem, kuri nav pazīstami ar programmēšanu, to būs vieglāk apgūt.
Mainīgie tiek deklarēti, izmantojot @ simbolu. Piemēram: @fontSize: 14px;. Ligzdošana darbojas tāpat kā Sassā. Miksins tiek deklarēts šādi: .largeFont () {font-family: ‘Times New Roman’; fonta lielums: 64 pikseļi; līnijas augstums: 80 pikseļi; fonta svars: treknrakstā; }. Lai izveidotu savienojumu, jums nav jāizmanto priekšapstrādes procesoru direktīvas - vienkārši pievienojiet jaunizveidoto maisījumu atlasītā elementa īpašībām. Piemēram: h1 {.largeFont; }.
Vēl viens priekšapstrādes procesors. Izveidoja 2011. gadā tas pats autors, kurš pasaulei dāvāja nefrītu, ekspresi un citus noderīgus produktus.
Mainīgos var deklarēt divos veidos - skaidrivai netieši. Piemēram: font = ‘Times New Roman’; Vai ir netieša iespēja. Bet $ font = ‘Times New Roman’ ir nepārprotams. Mixins tiek deklarēti un saistīti netieši. Sintakse ir redColor () krāsa sarkana. Tagad mēs varam to pievienot elementam, piemēram: h1 redColor ();.
No pirmā acu uzmetiena Stylus var šķistnesaprotams. Kur ir "dzimtās" iekavas un semikoli? Bet, tiklīdz jūs tajā ienirstat, viss kļūst daudz skaidrāks. Tomēr ņemiet vērā, ka ilgstoša izstrāde ar šo priekšapstrādātāju var pieradināt jūs izmantot klasisko CSS sintaksi. Dažreiz tas rada problēmas, kad jāstrādā ar "tīriem" stiliem.
Tas tiešām ... nav svarīgi. Visas opcijas nodrošina aptuveni vienādas iespējas, tikai sintakse katram ir atšķirīga. Mēs iesakām rīkoties šādi:
Visām opcijām ir pieejams milzīgs skaits iespējuinteresantas bibliotēkas, kas var vēl vairāk vienkāršot attīstību. Sass lietotāji tiek aicināti apskatīt Compass - spēcīgu rīku ar daudzām iebūvētām iespējām. Piemēram, pēc instalēšanas jums vairs nav jāuztraucas par pārdevēja prefiksiem. Darbs ar acīm ir vienkāršots. Ir utilītas darbam ar krāsām, spritēm. Pieejami vairāki jau paziņoti maisījumi. Pavadiet dažas dienas ar šo rīku - tādējādi jūs ietaupīsiet daudz laika un enerģijas nākotnē.
