Preprocessor CSS: BECA, seleksyon, aplikasyon

Absoliman tout Designers entènèt ki gen eksperyans sèvi ak preproseseur la. Pa gen okenn eksepsyon. Si ou vle yo reyisi nan aktivite sa a, pa bliye sou pwogram sa yo. Nan premye gade, yo ka lakòz yon inisyasyon laterè trankil - li se twò menm jan ak pwogram lan! An reyalite, ou ka fè fas ak tout karakteristik yo nan CSS preproseseur pou apeprè yon jou, epi si ou eseye, lè sa a yon koup la èdtan. Nan lavni an, yo pral siyifikativman senplifye lavi ou.

Ki jan CSS preproseseur

Pi byen konprann karakteristik sa yo nan teknoloji sa a, yon ti tan fouye nan istwa a nan prezantasyon an vizyèl nan paj web.

Lè sèlman jis kòmanse itilize nan masiv nan entènèt la, pa gen okenn dra style pa t egziste. Egzekisyon nan dokiman depann antyèman sou navigatè a. Chak nan yo te gen Styles pwòp yo, ki yo te itilize pou tretman an nan sèten Tags. An konsekans, paj sa yo gade diferan depann sou nan ki lòd navigatè a ou louvri yo. Rezilta a - dezòd, konfizyon, pwoblèm sa yo pou devlopè.

An 1994, Norwegian Bokmål syantis Håkon kouche devlope yon fèy style ki te kapab itilize pou aparans nan paj sa yo apa nan HTML-dokiman an. lide priglanulas Manm yo nan W3C a, ki moun ki imedyatman mete soti nan fini. Yon kèk ane pita li te pibliye yon vèsyon premye nan spesifikasyon la CSS. Apre sa, li te toujou ap amelyore, yo te fini ... Men, konsèp la rete tout menm bagay: chak style a mete sèten pwopriyete.

Lè l sèvi avèk tab CSS te toujou Pwoblematik. Pou egzanp, Designers entènèt souvan te gen pwoblèm ki genyen ak klasman ak gwoupman karakteristik, ak pòsyon tè se pa konsa senp.

Lè sa a, te vin milyèm nan de. Mak de pli zan pli yo te kòmanse angaje yo nan devlopè devan-fen pwofesyonèl, ki enpòtan yo dwe estil travay fleksib ak dinamik. Egziste nan plasman nan tan mande prefiks CSS ak swiv sipò kapasite yo nan nouvo navigatè a. Lè sa a, pa JavaScript, ak Ruby ekspè te resevwa desann nan biznis, kreye yon preproseseur - supèrstruktur pou CSS, karakteristik nouvo yo te ajoute nan li.

CSS pou débutan: karakteristik preproseseur

Yo gen plizyè fonksyon:

• inifye prefiks navigatè ak kaki;

• senplifye sentaks;

• bay opòtinite pou yo travay avèk seleksyon enbrike san yo pa erè;

• amelyore manier lojik.

Nan ti bout tan: preproseseur a ajoute CSS kapasite lojik pwogramasyon. Koulye a, manier pa fèt nan lis la abityèl nan Styles epi ki gen yon teknik kèk ki senp epi apwòch: varyab, fonksyon, hagfish, sik kondisyon. Anplis de sa, kapasite nan sèvi ak matematik.

Wè popilarite a nan sa yo ajoute-ins, W3C a te kòmanse piti piti ajoute posibilite pou yo nan kòd la CSS. Pou egzanp, nan spesifikasyon la se konsa gen fonksyon Calc (), ki se sipòte pa anpil navigatè. Li espere ke byento li pral posib yo mete varyab ak kreye yon hagfish. Sepandan, sa a pral rive nan lavni an byen lwen, ak preprocessors deja isit la ak deja travay byen.

Popilè preprocessors CSS. toupe

Ki fèt nan 2007. Originally yon eleman Haml - yon HTML modèl. Karakteristik nouvo pou eleman CSS kontwole devlopè relished sou Ruby la sou ray, ki te kòmanse gaye li toupatou. Toupe a yon nimewo gwo nan karakteristik ki yo kounye a se enkli nan nenpòt ki preproseseur: varyab, selaj nan seleksyon, hagfish (Lè sa a, sepandan, sa yo agiman pa ka dwe ajoute).

Deklare varyab nan toupe

Varyab deklare ak $ siy lan. Yo ka kenbe pwopriyete yo epi li kouche, pou egzanp: "$ borderSolid: 1px wouj solid;". Nan egzanp sa a, nou deklare yon varyab rele borderSolid ak sove li apresye wouj 1px solid. Koulye a, si nan CSS a nou bezwen yo kreye yon lajè fwontyè wouj nan 1px, tou senpleman endike ke varyab apre non an pwopriyete. Apre anons la nan varyab yo pa ka chanje. Gen plizyè bati-an fonksyon. Pou egzanp, deklare yon varyab ki gen yon valè de $ redcolor # FF5050. Koulye a, nan kòd la CSS nan pwopriyete yo nan nenpòt ki eleman, sèvi ak li yo mete koulè a font: p {koulè: $ redColor; }. ou vle eksperyans ak koulè a? Sèvi ak fonksyon Nwasi oswa aleje. Sa a se fè sa: p {koulè: bouche ($ redColor, 20%); }. Kòm yon rezilta, redColor nan koulè yo pral 20% pi lejè.

Toupe anpil bati-an fonksyon yo. Vo omwen li yo, men pi bon - yo aprann.

nidifikasyon

Précédemment, yo endike nidifikasyon te sèvi ak yon konsepsyon long ak alèz. Imajine ke nou gen yon div, ki se p, ak nan li, nan vire, mete span. Pou div an, nou bezwen yo mete koulè a font wouj, pou p - jòn, pou span a - woz. Nan yon CSS tipik li ta dwe fè jan sa a:

div {

koulè: wouj;

}

div p {

koulè: jòn;

}

span div p {

koulè: woz;

}

Avèk CSS preproseseur tout vin pi fasil ak plis ankò kontra enfòmèl ant:

div {

koulè: wouj;

p {

koulè: jòn;

.span {

koulè: woz;

}

}

}

Eleman literalman "envesti" youn ak lòt.

preproseseur direktiv

Lè l sèvi avèk direktiv @import ka enpòte dosye. Pou egzanp, nou gen dosye fonts.sass ki deklare estil yo pou polis. Konekte li nan style.sass nan dosye prensipal: @import 'polis'. Fè! Olye pou yo yon dosye sèl gwo ak estil yo nou gen yon kèk ki ka itilize pou gen aksè rapid ak pi fasil nan pwopriyete ki nesesè yo.

hagfish

Youn nan lide yo ki pi enteresan. Li pèmèt yon sèl liy mande yon seri pwopriyete. Opere jan sa a:

@mixin largeFont {

font-fanmi: 'Times New Roman';

font-gwosè: 64px;

liy-wotè: 80px;

font-pwa: fonse;

}

Hagfish pou aplike nan eleman ki nan paj la, sèvi ak @include nan direktiv. Pou egzanp, nou vle aplike li nan header a h1. Nou gen estrikti ki anba la a: H1 {@include: largeFont; }

Tout pwopriyete yo nan hagfish yo asiyen yon eleman H1.

preproseseur Mwens

Sentaks toupe sonje pwogramasyon. Si ou ap chèche pou yon opsyon ki se pi plis apwopriye pou débutan etidye CSS, gade pou Mwens. Li te kreye nan 2009. Karakteristik nan prensipal - sipò pou CSS sentaks natal, se konsa abitye avèk enpozeur pwogram li pral pi fasil yo aprann.

varyab yo yo te deklare lè l sèvi avèk senbòl la @. Pou egzanp: @fontSize: 14px;. travay nidifikasyon sou prensip yo menm jan ak nan toupe. Hagfish yo te anonse jan sa a: .largeFont () {font-fanmi: 'Times New Roman'; font-gwosè: 64px; liy-wotè: 80px; font-pwa: fonse; }. Pou konekte li pa nesesè yo sèvi ak direktiv preproseseur - jis ajoute hagfish a ki fèk kreye nan pwopriyete yo nan eleman nan chwazi. Pou egzanp: h1 {.largeFont; }.

dyaman

Yon lòt preproseseur. Ki te kreye nan 2011 pa otè a menm, ki te bay mond lan Jade a, Express ak lòt pwodwi itil.

Varyab ka deklare nan de fason - swa klèman oswa chal. Pou egzanp: font = 'Times New Roman'; - yon opsyon enplisit. Men, $ font = 'Times New Roman' - klè. Hagfish yo te deklare ak chal konekte. sentaks la se jan sa a: redColor () koulè wouj. Koulye a, nou kapab ajoute atik la, pou egzanp: h1 redColor ();.

Dyaman nan premye gade li pouvwa sanble enkonpreyansib. Ki kote se "natif natal" parantèz yo ak virgules? Men, li nesesè yo plonje nan li, tout vin pi klè. Sonje, sepandan, ke alontèm devlopman nan sa a preproseseur ka "sevre" ou itilize sentaks la CSS klasik. Sa a pafwa lakòz pwoblèm lè gen yo travay avèk yon style "pi bon kalite".

Ki sa ki preproseseur chwazi?

An reyalite, li se ... li pa gen pwoblèm. Tout vèsyon ofri sou karakteristik yo ki menm jis sentaks la nan chak se diferan. Nou rekòmande yo kontinye jan sa a:

• si ou - pwogramè epi ou vle travay avèk Styles tou de nan Kòd, sèvi ak toupe a;
• si ou - yon xslt epi ou vle travay avèk Styles menm jan ak Layout la konvansyonèl yo, peye atansyon sou Mwens a;
• si ou renmen minimalist, sèvi ak stilu a.

Pou tout variantes de yon nimewo kontinuèl nan bibliyotèk enteresan ki ka menm pi lwen senplifye devlopman. Itilizatè yo toupe rekòmande yo peye atansyon sou Compass la - yon zouti pwisan ak anpil karakteristik bati-an. Pou egzanp, apre yo fin ou enstale li ou pral pa janm gen enkyete sou prefiks la machann vèsyon. Senplifye travay avèk grilles. Gen yo se zouti pou travay ak flè, sprites. Yon seri deja anonse hagfish. Bay zouti sa a yon koup la jou - konsa ou pral sove yon anpil nan tan ak efò nan lavni.