Preprocessor CSS: ikuspegi orokorra, aukeraketa, aplikazio

Erabat esperientziadun web diseinatzaile guztiak preprocessor erabili. Badira salbuespenak. Jarduera honetan arrakasta nahi baduzu, ez programa horiek ahaztu. Lehen begiratuan, hasiberriak lasaia beldurrezko bat eragin ahal izango dute - too programazio antzekoa da! Izan ere, CSS preprocessor ezaugarri guztiak landu ahal izango duzu egun bat inguru, eta saiatu baduzu, orduan ordu pare bat. Etorkizunean, nabarmen egingo dute errazteko zure bizitza.

Nola egin CSS preprocessor

To hobeto ulertzen teknologia honen ezaugarriak, laburki bisuala Web orrien aurkezpena historian murgilduko da.

hasi besterik Noiz Interneten erabilera masiboak, ez estilo-orriak ez da existitzen. dokumentuak exekuzioak menpe erabat nabigatzailea gainean. Horietako bakoitzak bere estilo propioa, eta hauek etiketa jakin batzuk tratatzeko erabili izan zituen. Ondorioz, orrialdeak begiratu desberdinak ordena horretan, nabigatzailea ireki duzun arabera. Emaitza - kaosa, nahasmena, garatzaileentzat arazoak.

1994an, Norvegiako zientzialari Håkon Lie estilo-orri bat izan orrialdeen itxura bereizita HTML-dokumentu batetik erabiliko da garatu. Ideia priglanulas W3C, berehala ezarri amaitzean kideak. Urte batzuk geroago CSS zehaztapena lehen bertsioa argitaratu zuen. Orduan zuen etengabe hobetu zen, ari bukatu ... Baina kontzeptua mantendu berdinak guztiak: estilo bakoitzaren propietate jakin batzuk ezarri.

CSS taulak erabiltzea beti izan da problematikoa. Adibidez, web diseinatzaile askotan ezaugarriak sailkatzeko eta elkartuz arazoak izan, eta herentzia ez da hain erraza.

Eta gero etorri ziren bi milaren. Marka gero eta asi profesionala aurrean-end sustatzaileei, eta hori oso garrantzitsua lan estilo malgua eta dinamikoa izan nahi du ihardun. Denbora eskatzen CSS aurrizkiak jartzea zegoen eta laguntza nabigatzaileak gaitasun berriak segimendua. Ondoren, Javascript, eta Ruby adituek lortu negozioa behera, preprocessor bat sortuz - CSS for gainegitura, ezaugarri berriak dira gehitu.

CSS hastapena: preprocessor ezaugarriak

hainbat funtzio dituzte:

• bateratzeko nabigatzaileak aurrizkiak eta kaki;

• errazteko sintaxia;

• aukera izango dute akatsak gabe habiaratutako Selectors batekin lan emateko;

• hobetu logika Sorozabal.

Laburbilduz: preprocessor gehitzen CSS programazioa logika gaitasunak. aldagai, funtzio, hagfish, zikloak baldintza: orain, estiloa ez da ohiko estilo zerrenda batean eta teknika erraz batzuk eta ikuspegi batekin egin. Gainera, gaitasuna matematika erabiltzeko.

Gehigarrien ins horiek ospea ikusirik, W3C hasi dira horietako aukera pixkanaka gehitu CSS kodean. Adibidez, zehaztapena, beraz, ez calc () funtzioak, hau da nabigatzaile asko onartzen. Aurreikuspenen arabera, laster hori posible izango aldagaiak ezarri eta hagfish bat sortuko du. Hala ere, hau izango da etorkizun hurbilean gertatuko, eta preprocessors dagoeneko hemen eta dagoeneko ondo funtzionatzen.

Popular preprocessors CSS. Sass

2007an diseinatua. Jatorriz osagai Haml bat - template HTML a. CSS elementu ezaugarri berri kontrolatzeko Rails Ruby, bertan hasi zen nonahi zabaldu on relished garatzaileei. Sass eginbide hori orain edozein preprocessor sartutako kopuru handi bat: aldagaiak, selectors kapsulatze, hagfish (ondoren, ordea, argudio horiek ezin dira gehitu).

Deklaratzea Sass aldagai

Aldagaiak $ zeinua deklaratu. beren propietate eta multzo mantendu ahal izango dute, adibidez: "$ borderSolid: 1 px red solidoa;". Adibide honetan, borderSolid izeneko aldagai bat deklaratu dugu eta gordetako red 1 px solidoa baloratzen da. Orain, bada CSS batean mugatik red 1 px zabalera bat sortu behar dugu, besterik gabe, jabetza izenaren ondoren aldagai hori adierazten du. aldagai deialdiaren ondoren ezin da aldatu. eraiki-hainbat funtzio daude. Adibidez, deklaratzen aldagai bat $ redColor # FF5050 balioa batekin. Orain, CSS edozein elementu propietateetan kodean, erabiltzen da letra-kolorea ezarri: p {color: $ redColor; }. Ez kolore esperimentatu nahi duzu? Erabili funtzioa ilundu edo argitu. Hau hala egin da: p {color: ilundu ($ redColor,% 20); }. Ondorioz, kolore redColor% 20 arinagoa izango da.

The Sass asko eraiki-funtzioak. Merezi du gutxienez irakurri, baina hobe - ikasteko.

habia

Aurretik, habia adierazteko izan diseinu luze eta deseroso bat erabili. Imajinatu div bat, zein p da dugula, eta bertan, aldi berean, ezarri span. div lortzeko, letra-kolorea gorria ezartzeko, p behar dugu - horia, tartean for - pink. CSS tipikoa da, honela egin beharko litzateke:

div {

color: red;

}

div p {

kolorea: horia;

}

div p span {

kolorea: arrosa;

}

CSS preprocessor With guztiak bihurtzen errazagoa eta trinkoa:

div {

color: red;

p {

kolorea: horia;

.span {

kolorea: arrosa;

}

}

}

Elementu literalki "inbertitu" beste bat.

preprocessor zuzentarau

@import zuzentarau erabiliz fitxategiak inporta ditzake. Adibidez, fonts.sass fitxategia letra estilo deklaratzen duen ditugu. Lotu ezazu fitxategia style.sass nagusira: @import 'tipoak'. Done! Horren ordez estiloak fitxategi handiak bakar batena beharrezko propietate sarbide azkar eta erraz erabili ahal izango da gutxi izan dugu.

hagfish

ideia interesgarrienetako bat. lerro bat propietate multzo bat eskatu ematen du. honela operatu:

@mixin largeFont {

font-family: 'Times New Roman';

font-size: 64px;

line-height: 80px;

font-weight: bold;

}

Hagfish den elementua aplikatuko orrian, zuzentarau @include erabili. Adibidez, aplikatu h1 goiburua nahi dugu. h1 {@include: honako egitura daukagu largeFont; }

hagfish propietate guztiak h1 elementu bat esleitzen dira.

preprocessor gutxiago

Sintaxi Sass programazio gogora. Aukera baten bila bazabiltza dela gehiago CSS ikasten hasiberrientzako egokia, gutxiago bilatzeko. 2009an sortu zen. Ezaugarri nagusiak - CSS bertako sintaxia laguntza, eta, beraz, programazio Imposer Ohituta errazago ikasteko izango da.

aldagaiak @ ikurra erabiliz deklaratu dira. Adibidez: @fontSize: 14px;. printzipio berean Habia lanak Sass bezala. .largeFont () {font-family: Hagfish honela iragarri dira 'Times New Roman'; font-size: 64px; line-height: 80px; font-weight: bold; }. besterik gehitu sortu berri hagfish hautatutako elementua propietate batean - ez da beharrezkoa preprocessor zuzentarau erabili konektatzeko. Adibidez: h1 {.largeFont; }.

Stylus

preprocessor bat. Egile beraren, munduko Jade du, Express eta beste produktu baliagarriak eman duten moduan 2011an sortua.

Aldagaiak bi modutara deklaratu daiteke - bai esplizituki edo inplizituki. Adibidez: font = 'Times New Roman'; - Aukera inplizitua. Baina $ font = 'Times New Roman' - argi. Hagfish deklaratu dira, eta inplizituki konektatua. redColor () kolore gorri: sintaxia honakoa da. h1 redColor ();: orain elementua gehitu dezakegu, adibidez.

Lehen begiratuan on Stylus ulertezina iruditu. Non dago "jatorrizko" parentesi eta puntuz? Baina bertan murgiltzen beharrezkoa da, guztiak bihurtzen askoz argiagoa. Gogoratu, ordea, epe luzeko preprocessor honen garapena ezin "wean" klasiko CSS sintaxia erabili behar dituzu. Hau batzuetan arazoak sortzen denean bat "hutsa" style batekin lan edukitzea.

Zer preprocessor aukeratu?

Izan ere, da ... ez du axola. bertsio guztiak ezaugarri berdinak buruz eskaini besterik bakoitzaren sintaxia desberdina da. honela jarraitu gomendatzen dugu:

• izanez gero - programatzaile eta estilo biak kodea lanera, erabili Sass du nahi;
• izanez gero - Kodetzaile bat eta estilo batekin lan ohiko diseinua bezala, arreta gutxiago du nahi;
• Nahi izanez gero, minimalismoan, erabili Stylus du.

liburutegi interesgarri ezin are gehiago errazteko garapen kopurua amaigabea aldaera guztientzat. Erabiltzaileak Sass gomendatzen arreta Compass izateko - tresna indartsu bat eraiki-ezaugarri asko. Adibidez, instalatu ondoren inoiz ez duzu saltzailea bertsioaren aurrizkia kezkatu. Sinplifikatzen grids lan. loreak, sprites lan egiteko tresnak daude. sorta bat lehendik iragarri hagfish. Eman tresna hau egun pare bat - beraz, denbora eta ahalegin asko aurreztu ahal izango duzu etorkizunean.