Preprocessor CSS: kinatibuk-ang pagpasabut, pagpili, aplikasyon

Hingpit ang tanan nga batid nga web designers paggamit sa preprocessor. Walay mga eksepsyon. Kon kamo gusto nga molampos sa niini nga kalihokan, ayaw kalimot mahitungod sa niini nga mga mga programa. Sa unang tan-aw, sila hinungdan sa usa ka novice hilum kalisang - kini mao ang kaayo susama sa mga programming! Sa pagkatinuod, kamo makahimo sa pag-atubang sa tanang mga bahin sa CSS preprocessor alang sa bahin sa usa ka adlaw, ug kon kamo naningkamot, nan, sa usa ka magtiayon nga sa mga oras. Sa umaabot, sila kamahinungdanon pagpayano sa imong kinabuhi.

Sa unsang paagi CSS preprocessor

Aron mas makasabut sa mga kinaiya sa niini nga teknolohiya, sa daklit pagsusi sa kasaysayan sa visual presentasyon sa mga panid Web.

Sa diha nga lang nagsugod sa kaylap nga paggamit sa Internet, walay estilo sheets nga wala maglungtad. Pagpatay sa mga dokumento agad sa bug-os sa browser. Ang matag usa kanila may ilang kaugalingon nga mga estilo, nga gigamit alang sa pagtambal sa pipila ka mga tag. Busa, sa mga panid tan-awon lain-laing mga depende sa han-ay nga ang browser abli ninyo sila. Ang resulta - sa kagubot, kalibog, mga problema alang sa mga developers.

Sa 1994, Norwegian nga siyentista Håkon Umari og usa ka estilo sheet nga mahimong magamit alang sa dagway sa mga panid gilain gikan sa HTML-dokumento. Ang ideya priglanulas mga sakop sa W3C, nga diha-diha dayon sa sa sa pagkompleto. Pipila ka tuig ang milabay siya gipatik sa usa ka una nga bersyon sa CSS paghingalan. Unya siya kanunay milambo, nga gihikay ... Apan ang konsepto nagpabilin sa tanan sa mao usab nga: ang matag estilo gibutang sa pipila ka mga kabtangan.

Pinaagi sa paggamit sa CSS lamesa kanunay nga problema. Pananglitan, web designers sagad may problema sa hagpat ug gihugpong bahin, ug panulondon mao ang dili yano.

Ug unya miduol ang duha ka libo. Mga marka nga mas misugod sa paghimo sa propesyonal nga atubangan-katapusan developers, nga mao ang importante nga nga flexible ug dinamikong estilo sa trabaho. Naglungtad sa panahon gipangayo CSS prefix placement ug tracking suporta sa bag-ong mga kapabilidad sa browser. Dayon, pinaagi sa JavaScript, ug Ruby eksperto na ngadto sa negosyo, pagmugna sa usa ka preprocessor - superstructure alang sa CSS, bag-ong mga bahin nga dugang pa niini.

CSS alang sa magsusugod: preprocessor bahin

Sila adunay pipila ka mga gimbuhaton:

• mahiusa prefix browser ug kaki;

• simple syntax;

• sa paghatag sa mga oportunidad sa pagtrabaho uban sa dugmonan selectors nga walay kasaypanan;

• pagpalambo sa lohika nga estilo.

Sa mubo nga: ang preprocessor midugang CSS kapabilidad programming katarungan. Karon, estilo wala gihimo diha sa naandan nga talaan sa mga estilo, ug uban sa usa ka pipila ka yano nga mga teknik ug mga pamaagi: baryable, gimbuhaton, hagfish, mga siklo nga mga kahimtang. Dugang pa, ang abilidad sa paggamit sa matematika.

Sa pagtan-aw sa pagkapopular sa mga add-ins, ang W3C nagsugod na sa hinay-hinay nga pagdugang sa posibilidad sa kanila diha sa CSS code. Kay sa panig-ingnan, sa paghingalan mao nga adunay calc () nga function, nga gisuportahan sa daghang mga browsers. Kini gilauman nga sa dili madugay kini mahimong posible nga aron sa baryable ug paghimo sa usa ka hagfish. Apan, kini nga mahitabo sa halayong umaabot, ug preprocessors na dinhi ug na pag-ayo.

Popular preprocessors CSS. saß

Gidisenyo sa 2007. Originally usa ka component Haml - sa usa ka template HTML. Bag-ong mga bahin alang sa mga elemento CSS pagpugong Ganahan developers sa Ruby sa babag, nga nagsugod sa mikaylap kini sa tanang dapit. Ang saß usa ka dako nga gidaghanon sa mga bahin nga karon naglakip sa bisan unsa nga preprocessor: baryable, nga magluklok sa mga selectors, hagfish (unya, Apan, kini nga mga argumento dili gidugang).

Pagpahayag baryable sa saß

Baryable mipahayag sa $ ilhanan. Sila makahimo sa pagpadayon sa ilang mga kabtangan ug mga sets, alang sa panig-ingnan: "$ borderSolid: 1px lig-on nga pula nga;". Sa panig-ingnan niini nga, gipahayag kami sa usa ka baryable nga gitawag borderSolid ug giluwas kini bili 1px lig-on nga pula nga. Karon, kon sa CSS nga atong gikinahanglan sa paghimo sa usa ka pula nga utlanan gilapdon sa 1px, nagpakita lamang nga ang baryable human sa ngalan kabtangan. Human sa pahibalo sa mga baryable dili mausab. Adunay pipila ka mga gitukod-sa gimbuhaton. Pananglitan, ipahayag sa usa ka baryable uban sa usa ka bili sa $ redcolor # FF5050. Karon, diha sa CSS code sa mga kabtangan sa bisan unsang elemento, sa paggamit niini aron sa ang kolor font: p {kolor: $ redColor; }. Gusto ba kamo nga sa pag-eksperimento uban sa mga kolor? Gamita ang function pangitngitan o pagpagaan. Kini mao ang gibuhat sa ingon: p {kolor: pangitngitan ($ redColor, 20%); }. Ingon sa usa ka resulta, ang kolor redColor mahimong 20% magaan-gaan.

Ang saß sa daghang mga gitukod-sa gimbuhaton. Bili sa labing menos sa pagbasa kanila, apan mas maayo - sa pagkat-on.

nesting

Kaniadto, nagpaila nesting nga paggamit sa usa ka taas nga ug dili komportable nga desinyo. Handurawa nga kita adunay usa ka div, nga mao ang p, ug sa niini, sa baylo, sa gitas-on sa. Kay ang div, kita kinahanglan nga gibutang sa kolor font pula, alang sa p - yellow, alang sa dangaw - pink. Sa usa ka tipikal nga CSS kini nga gibuhat sama sa mosunod:

div {

kolor: pula nga;

}

div p {

kolor: yellow nga;

}

div p dangaw {

kolor: pink;

}

Uban sa CSS preprocessor sa tanan mahimong mas sayon ug mas compact:

div {

kolor: pula nga;

p {

kolor: yellow nga;

.span {

kolor: pink;

}

}

}

Mga elemento sa literal "puhunan" sa usag usa.

preprocessor direktiba

Pinaagi sa paggamit sa @import direktiba mahimo og file. Kay sa panig-ingnan, kita adunay fonts.sass file nga nagaingon ang estilo alang sa tulonghaan. Sumpaysumpaya kini sa mga nag-unang file style.sass: @import 'tulonghaan'. Nabuhat! Inay sa usa ka dako nga file uban sa mga estilo kita adunay usa ka pipila nga mahimong gamiton alang sa dali ug sayon nga access sa mga gikinahanglan nga mga kabtangan.

hagfish

Usa sa labing makapaikag nga mga ideya. Kini nagtugot sa usa ka linya sa pagpangutana sa usa ka hugpong sa mga kabtangan. Operate ingon sa mosunod:

@mixin largeFont {

font-pamilya: 'Times New Roman';

font-size: 64px;

linya-gitas-on: 80px;

font-timbang: maisug;

}

Hagfish sa paggamit sa mga elemento sa panid, sa paggamit sa direktiba @include. Pananglitan, gusto kita sa paggamit niini ngadto sa header H1. Kita adunay sa mosunod nga estraktura: H1 {@include: largeFont; }

Ang tanan nga mga kabtangan sa hagfish gitudlo sa usa ka H1 elemento.

preprocessor Wala

Syntax saß nahinumdom programming. Kon kamo sa pagtan-aw alang sa usa ka kapilian nga mas angay alang sa beginners sa pagtuon CSS, tan-awa sa Dili kaayo. Kini gimugna sa tuig 2009. Ang nag-unang bahin - suporta alang sa CSS lumad syntax, mao nga dili pamilyar sa programming Imposer kini mahimong mas sayon sa pagkat-on.

Ang mga baryable gipahayag nga sa paggamit sa @ simbolo. Pananglitan: @fontSize: 14px;. Nesting mga buhat sa sama nga mga baruganan sama sa saß. Hagfish mga gipahibalo sa mosunod: .largeFont () {font-pamilya: 'Times New Roman'; font-size: 64px; linya-gitas-on: 80px; font-timbang: maisug; }. Aron Sumpaysumpaya kini dili kinahanglan sa paggamit sa preprocessor direktiba - makadugang lang sa bag-ong gibuhat sa hagfish sa mga kabtangan sa mga pinili nga elemento. Pananglitan: H1 {.largeFont; }.

dagang

Laing preprocessor. Gilalang sa 2011 pinaagi sa sama nga tagsulat, nga gihatag sa kalibutan sa Jade, Express ug uban pang mga mapuslanon nga mga produkto.

Baryable mahimong gipahayag sa duha ka paagi - bisan hayag o bug-os nga. Pananglitan: font = 'Times New Roman'; - sa usa ka bug-os nga kapilian. Apan $ bunyaganan = 'Times New Roman' - tin-aw. Hagfish gipahayag ug bug-os nga konektado. syntax mao ang sama sa mosunod: redColor () kolor pula nga. Karon nga kita makadugang sa butang, alang sa panig-ingnan: H1 redColor ();.

Dagang sa unang tan-aw morag dili masabtan. Hain man ang "lumad" bracket ug semicolons? Apan kini mao ang gikinahanglan nga sa magaunlod ngadto niini, ang tanan mahimong mas tin-aw. Hinumdumi, bisan pa niana, nga ang long-term development sa preprocessor niini nga "pag-wean" imong gamiton ang classic CSS syntax. Kini usahay maoy hinungdan sa mga problema sa dihang may sa pagtrabaho uban sa usa ka "putli" estilo.

Unsa preprocessor pagpili?

Sa pagkatinuod, kini mao ang ... dili kini igsapayan. Ang tanan nga mga bersiyon sa paghalad sa samang bahin lang sa syntax sa matag lahi. Kita og rekomend sa pagpadayon sa mosunod:

• kon ikaw - programmer ug buot sa pagtrabaho uban sa mga estilo diha sa code, sa paggamit sa saß;
• kon ikaw - sa usa ka coder ug gusto sa pagtrabaho uban sa mga estilo sama sa conventional layout, pagtagad sa sa Dili Kaayo;
• kon gusto kamo minimalism, sa paggamit sa dagang.

Kay ang tanan nga variants sa usa ka walay katapusan nga gidaghanon sa mga makapaikag nga mga librarya nga bisan dugang pa nga pasimplehon ang kalamboan. Users saß girekomendar sa pagbayad sa pagtagad sa mga Kompas - sa usa ka gamhanan nga himan uban sa daghan nga gitukod-sa mga bahin. Pananglitan, human kamo instalar kini kamo dili kinahanglan nga mabalaka mahitungod sa vendor nga bersyon prefix. Mopayano sa pagtrabaho uban sa grids. Adunay mga himan alang sa pagtrabaho uban sa mga bulak, sprites. Usa ka laing na gipahibalo hagfish. Hatagi kini nga himan sa usa ka magtiayon nga sa mga adlaw - sa ingon ikaw pagluwas sa usa ka daghan sa mga panahon ug paningkamot sa umaabot.