CSS Preprocessor: ħarsa ġenerali, selezzjoni, l-applikazzjoni

Assolutament disinjaturi web esperjenza jużaw l-preprocessor. M'hemm l-ebda eċċezzjonijiet. Jekk inti tixtieq li jirnexxu f'din l-attività, ma ninsewx dwar dawn il-programmi. Ewwel daqqa t'għajn, li jistgħu jikkawżaw orrur kwieta novizzi - huwa wisq simili għall-ipprogrammar! Fil-fatt, inti tista 'tittratta mal-karatteristiċi kollha ta' preprocessor CSS għal madwar kuljum, u jekk inti tipprova, allura ftit sigħat. Fil-futur, dawn se jissimplifikaw b'mod sinifikanti l-ħajja tiegħek.

Kif għamlet preprocessor CSS

Biex tifhem aħjar il-karatteristiċi ta 'dan it-teknoloġija, fil-qosor wieħed jidħol fl-istorja tal-preżentazzjoni viżwali ta' paġni tal-Web.

Meta għadha fi stadju bikri l-użu massiv tal-Internet, l-ebda folji stil ma kinux jeżistu. Eżekuzzjoni ta 'dokumenti tiddependi kompletament fuq il-browser. Kull wieħed minnhom kellhom stili tagħhom stess, li jkunu ġew użati għat-trattament ta 'ċerti tikketti. Għaldaqstant, il-paġni ħarsa differenti jiddependi fuq l-ordni li fiha l-browser inti tiftaħ lilhom. Ir-riżultat - il-kaos, konfużjoni, problemi għall-iżviluppaturi.

Fl-1994, xjenzat Norveġiż Håkon Lie żviluppat folja stil li jistgħu jintużaw għall-dehra tal-paġni separatament mill--dokument HTML. Il-membri priglanulas idea tal-W3C, li immedjatament stabbiliti biex jitlesta. Ftit snin wara kien ippubblikat l-ewwel verżjoni tal-ispeċifikazzjoni CSS. Imbagħad hi kienet kontinwament imtejba, qed tiġi ffinalizzata ... Iżda l-kunċett baqa l-istess: kull stil stabbiliti ċerti proprjetajiet.

Użu ta 'tabelli CSS minn dejjem ħolqot diffikultajiet. Per eżempju, disinjaturi web spiss kellhom problemi bil-għażla u raggruppament karatteristiċi, u wirt ma jkunx hekk sempliċi.

U mbagħad daħal l-2000. Marki huma dejjem aktar bdiet biex jidħlu iżviluppaturi professjonali front-end, li huwa importanti li jkun stili tax-xogħol flessibbli u dinamiċi. Kienet teżisti fi tqegħid ħin mitluba prefissi CSS u traċċar appoġġ l-kapaċitajiet ġodda tal-browser. Imbagħad, minn JavaScript, u l-esperti Ruby qbilna l-ħidma, ħolqien ta 'preprocessor - superstruttura għal CSS, karatteristiċi ġodda huma miżjuda miegħu.

CSS għall jibdew: karatteristiċi Preprocessor

Huma għandhom diversi funzjonijiet:

• unifikati prefissi browser u Khaki;

• jissimplifikaw sintassi;

• tagħti l-opportunità li jaħdmu ma seletturi nested mingħajr żbalji;

• itejbu grafika loġika.

Fil-qosor: il-preprocessor żżid CSS kapaċitajiet loġika programmazzjoni. Issa, grafika ma titwettaqx fl-elenkar tas-soltu ta 'stili u ma' tekniki sempliċi ftit u approċċi: varjabbli, il-funzjonijiet, Hagfish, kondizzjonijiet ċikli. Barra minn hekk, il-kapaċità li jużaw matematika.

Nara l-popolarità ta 'dawn add-ins, il W3C bdew iżidu gradwalment l-possibbiltà minnhom fil-kodiċi CSS. Per eżempju, fl-ispeċifikazzjoni sabiex ikun hemm calc () funzjoni, li hija appoġġata mill browsers ħafna. Huwa mistenni li dalwaqt se jkun possibbli li jiġu stabbiliti fatturi varjabbli u joħolqu Hagfish. Madankollu, dan se jiġri fil-futur imbiegħed, u preprocessors diġà hawn u diġà jaħdmu tajjeb.

preprocessors popolari CSS. Sass

Iddisinjati fl-2007. Oriġinarjament komponent Haml - HTML template. Karatteristiċi ġodda għal elementi CSS kontroll iżviluppaturi relished fuq il-Ruby fuq binarji, li bdiet tinfirex kullimkien. Il Sass numru kbir ta 'karatteristiċi li issa huma inklużi fi kwalunkwe preprocessor: varjabbli, li jinkorporaw tal seletturi, Hagfish (allura, madankollu, ma jistgħux jiġu miżjuda dawn l-argumenti).

Jiddikjaraw varjabbli fil Sass

Varjabbli dikjarata bl-$ sinjal. Huma jistgħu jżommu l-propjetajiet tagħhom u settijiet, per eżempju: "$ borderSolid: aħmar solidu 1px;". F'dan l-eżempju, aħna ddikjarat varjabbli msejħa borderSolid u meħlusin valur aħmar 1px solida. Issa, jekk fil-CSS għandna bżonn li jinħoloq wisa aħmar fruntiera ta '1px, sempliċement jindika li varjabbli wara l-isem proprjetà. Wara t-tħabbir tal-varjabbli ma tistax tinbidel. Hemm diversi mibnija fil-funzjonijiet. Per eżempju, tiddikjara varjabbli b'valur ta '$ redcolor # FF5050. Issa, fil-kodiċi CSS fil-proprjetajiet ta 'xi element, jużaha biex jissettja l-kulur tat-tipa: p {kulur: $ redColor; }. Do inti tixtieq li esperiment mal-kulur? Uża jiskura funzjoni jew jiħfief. Dan isir sabiex: p {kulur: jiskura ($ redColor, 20%); }. Bħala riżultat, il-redColor kulur se jkun ta '20% eħfef.

Il-ħafna mibnija fil-funzjonijiet Sass. Jiswew mill-inqas jaqrawhom, iżda aħjar - biex jitgħallmu.

nesting

Preċedentement, biex jindikaw nesting kellhom jużaw disinn twil u skomda. Immaġina li għandna div, li hija p, u fiha, imbagħad, medda stabbiliti. Għall-div, għandna bżonn li jiġu stabbiliti l-kulur tat-tipa aħmar, għall-p - isfar, għall-medda - roża. Fi CSS tipiku dan se jsir kif ġej:

div {

kulur: aħmar;

}

div p {

kulur: isfar;

}

medda div p {

Kulur: roża;

}

Bil-preprocessor CSS kollha isir aktar faċli u aktar kompatti:

div {

kulur: aħmar;

p {

kulur: isfar;

.span {

Kulur: roża;

}

}

}

Elementi litteralment "investiti" xulxin.

direttivi Preprocessor

Bl-użu direttivi @import jistgħu jimportaw il-fajls. Per eżempju, għandna fajl fonts.sass li jiddikjara l-istili ta fonts. Qabbad lill-style.sass fajl prinċipali: @import "fonts". Magħmul! Minflok fajl kbir wieħed bil-istili għandna ftit li jistgħu jintużaw għall-aċċess rapidu u faċli għall-proprjetajiet meħtieġa.

Hagfish

Waħda mill-ideat l-aktar interessanti. Hija tippermetti linja waħda li jistaqsu sett ta 'proprjetajiet. Jaħdem kif ġej:

@mixin largeFont {

font-familja: "Times New Roman";

font-size: 64px;

linja tal-għoli: 80px;

font-piż: bold;

}

Hagfish li japplikaw għall-element fuq il-paġna, jużaw id-direttiva @include. Per eżempju, irridu li japplikaw lill-header h1. Għandna l-istruttura li ġejja: H1 {@include: largeFont; }

Il-proprjetajiet ta 'Hagfish huma assenjati element h1.

preprocessor Inqas

Sintassi Sass ifakkar programmazzjoni. Jekk inti qiegħed tfittex għal għażla li hija aktar xierqa għall jibdew jistudjaw CSS, tfittex Inqas. Ġie maħluq fl-2009. Il-karatteristika prinċipali - appoġġ għal CSS sintassi indiġeni, hekk familjari mal Imposer ipprogrammar se jkun aktar faċli biex jitgħallmu.

Il-varjabbli huma ddikjarati użu tas-simbolu @. Per eżempju: @fontSize: 14px;. xogħlijiet nesting fuq l-istess prinċipji bħal fil Sass. Hagfish huma mħabbra kif ġej: .largeFont () {font-familja: "Times New Roman"; font-size: 64px; linja tal-għoli: 80px; font-piż: bold; }. Li jgħaqqdu mhuwiex meħtieġ li jintużaw direttivi Preprocessor - biss żid il-Hagfish maħluqa mill-ġdid fl-proprjetajiet tal-element magħżul. Per eżempju: h1 {.largeFont; }.

istilus

preprocessor ieħor. Maħluq fl-2011 mill-istess awtur, li taw id-dinja l-Jade, Express u prodotti oħra utli.

Varjabbli jistgħu jiġu ddikjarati f'żewġ modi - jew espliċitament jew impliċitament. Per eżempju: font = "Times New Roman"; - għażla impliċitu. Iżda $ font = "Times New Roman" - ċar. Hagfish huma ddikjarati u konnessi b'mod impliċitu. Is-sintassi hija kif ġej: redColor () kulur aħmar. Issa nistgħu żid il-entrata, pereżempju: redColor h1 ();.

Istilus fuq l-ewwel daqqa t'għajn, jista 'jidher inkomprensibbli. Fejn hi l- "indiġeni" parentesi u semicolons? Iżda huwa meħtieġ li plunge fis dan, kollha isir ferm aktar ċara. Ftakar, madankollu, li l-iżvilupp fit-tul ta 'dan preprocessor jista "wean" tuża l-sintassi CSS klassika. Dan kultant jikkawża problemi meta jkollhom jaħdmu bil- "pur" stil.

Liema preprocessor jagħżlu?

Fil-fatt, huwa ... ma jimpurtax. Il-verżjonijiet kollha joffru dwar l-istess karatteristiċi biss il-sintassi ta 'kull wieħed minnhom huwa differenti. Nirrakkomandaw li tipproċedi kif ġej:

• jekk inti - programmer u jridu jaħdmu bi stili kemm fil-kodiċi, uża l Sass;
• jekk inti - Coder u jridu jaħdmu bi stili bħala mat-tqassim konvenzjonali, jagħtu attenzjoni lill-Inqas;
• jekk inti tixtieq minimalism, uża l-istilus.

Għall-varjanti kollha ta 'numru bla tmiem ta' libreriji interessanti li jistgħu jissimplifikaw anke aktar żvilupp. Utenti Sass rakkomandat li tingħata attenzjoni għall-Compass - għodda qawwija ma 'ħafna mibnija fil-karatteristiċi. Per eżempju, wara li tinstalla dan qatt m'int se jkollhom għalfejn tinkwieta dwar il-prefiss verżjoni bejjiegħ. Tissimplifika jaħdmu ma grilji. Hemm għodod għall-ħidma ma fjuri, sprites. Firxa diġà ħabbru Hagfish. Agħti din l-għodda ftit jiem - u b'hekk inti se jiffrankaw ħafna ħin u sforz fil-futur.