Preprocessor CSS: pangkalahatang-ideya, pagpili, application

Hinding ang lahat ng nakaranas ng mga web designer gamitin ang pre-processor. Walang mga pagbubukod. Kung nais mong magtagumpay sa gawaing ito, huwag kalimutan ang tungkol sa mga programang ito. Sa unang sulyap, maaari silang maging sanhi ng isang baguhan tahimik na horror - masyado itong katulad sa programming! Sa katunayan, maaari mong harapin ang lahat ng mga tampok ng CSS Preprocessor para sa tungkol sa isang araw, at kung susubukan mo, pagkatapos ng dalawang oras. Sa hinaharap, sila ay makabuluhang gawing simple ang iyong buhay.

Paano ginawa CSS Preprocessor

Upang mas mahusay na maunawaan ang mga katangian ng ang teknolohiyang ito, saglit na bungkalin ang kasaysayan ng visual na pagtatanghal ng mga pahina ng Web.

Kapag lamang lang nagsimula na ang napakalaking paggamit ng Internet, walang style sheet ay hindi umiiral. Pagpapatupad ng mga dokumento Nakadepende sa browser. Ang bawat isa sa kanila ay may kanilang sariling mga estilo, na kung saan ay nai-ginagamit para sa paggamot ng ilang mga tag. Alinsunod dito, ang mga pahina tumingin naiiba depende sa ang pagkakasunod-sunod na kung saan ang browser na iyong bubuksan ito. Ang resulta - ang kaguluhan, pagkalito, mga problema para sa mga developer.

Noong 1994, Norwegian siyentipiko Håkon Lie nakabuo ng isang style sheet na maaaring magamit para sa ang hitsura ng mga pahina nang hiwalay mula sa HTML-dokumento. Ang ideya priglanulas miyembro ng W3C, na agad-set out upang makumpleto. Ang ilang mga taon mamaya siya nai-publish ng isang unang bersyon ng CSS pagtutukoy. Pagkatapos siya ay patuloy na pinabuting, tinatapos ... Ngunit ang konsepto ay nanatili lahat ng parehong: ang bawat style set ng ilang mga katangian.

Paggamit ng CSS mga talahanayan ay palaging may problemang. Halimbawa, web designer ay madalas na nagkaroon ng problema sa pag-uuri at pagsasama nang mga tampok, at inheritance ay hindi kaya simple.

At pagkatapos ay dumating ang dalawang ikasanlibo. Markings ay unting nagsimulang upang makisali sa mga propesyonal na front-end developer, na kung saan ay mahalaga upang maging nababaluktot at dynamic na estilo ng trabaho. Umiral sa panahon ay humingi CSS prefixes placement at pagsubaybay sa suporta ng mga bagong kakayahan ng browser. Pagkatapos, sa pamamagitan ng JavaScript, at Ruby eksperto nakuha pababa sa negosyo, ang paglikha ng isang pre-processor - superistruktura para sa CSS, mga bagong tampok ay idinagdag dito.

CSS para sa mga nagsisimula: Preprocessor tampok

Ang mga ito ay ang ilang mga pag-andar:

• mapag-isa ang prefix browser at kaki;

• gawing simple ang syntax;

• bigyan ng pagkakataon upang gumana sa nested tagapili nang walang mga error;

• mapabuti ang logic styling.

Sa madaling salita: ang pre-processor ay nagdadagdag ng CSS kakayahan programming logic. Ngayon, styling ay hindi na gumana sa karaniwang mga listahan ng mga estilo at na may ilang simpleng pamamaraan at na paglalapit: variable, function, hagfish, cycles kondisyon. Sa karagdagan, ang kakayahan upang gamitin ang matematika.

Nakikita ang katanyagan ng mga add-ins, ang W3C ay nagsimula sa dahan-dahan idagdag ang posibilidad ng mga ito sa CSS code. Halimbawa, sa detalye kaya doon calc () function, na kung saan ay suportado ng maraming mga browser. Ito ay inaasahan na sa lalong madaling panahon ito ay magiging posible upang magtakda ng mga variable at lumikha ng isang hagfish. Gayunpaman, ito ang mangyayari sa nalalapit na hinaharap, at preprocessors naririto na at naka-gumagana ng maayos.

Popular preprocessors CSS. Sass

Dinisenyo noong 2007. Orihinal na isang bahagi Haml - isang template ng HTML. Mga bagong tampok para sa mga elemento CSS kontrolin relished developer sa Ruby sa daang-bakal, na kung saan ay nagsimulang kumalat ito sa lahat ng dako. Ang Sass isang malaking bilang ng mga tampok na ngayon ay kasama sa anumang mga pre-processor: variable, pag-embed ng mga tagapili, hagfish (pagkatapos, gayunpaman, ang mga argumento ay hindi maaaring idinagdag).

Ang pagdeklara ng variable sa Sass

Variable na ipinahayag sa $ sign. Maaari silang panatilihin ang kanilang mga katangian at mga hanay, halimbawa: "$ borderSolid: 1px solid red;". Sa halimbawang ito, ipinahayag namin ang isang variable na tinatawag na borderSolid at nai-save ito Pinahahalagahan 1px solid red. Ngayon, kung sa CSS na kailangan namin upang lumikha ng isang pulang hangganan lapad ng 1px, ay nagpapahiwatig lamang na variable pagkatapos ng pangalan ng ari-arian. Matapos ang anunsyo ng mga variable ay hindi maaaring mabago. Mayroong ilang mga built-in na pag-andar. Halimbawa, ipinapahayag sa isang variable na may halagang $ redcolor # FF5050. Ngayon, sa CSS code sa ang mga katangian ng anumang elemento, gamitin ito upang i-set ang kulay ng font: p {color: $ redColor; }. Gusto mo upang mag-eksperimento na may kulay? Gamitin ang function diliman o lighten. Ginagawa ito kaya: p {color: diliman ($ redColor, 20%); }. Bilang isang resulta, ang kulay redColor ay magiging 20% mas magaan.

Ang Sass maraming mga built-in function. Worth ng hindi bababa sa basahin ang mga ito, ngunit mas mahusay na - upang matuto.

nesting

Noong nakaraan, upang ipahiwatig nesting nagkaroon na gumamit ng isang mahaba at hindi komportable disenyo. Isipin na mayroon kaming isang div, na kung saan ay p, at sa loob nito, siya namang, i-set span. Para sa div, kailangan naming i-set ang kulay ng font red, para p - dilaw, para sa span - pink. Sa isang tipikal na CSS ay ito ay tapos na tulad ng sumusunod:

div {

color: red;

}

div p {

kulay: dilaw;

}

div p span {

kulay: pink;

}

Sa CSS Preprocessor ang lahat ay nagiging mas madali at mas compact:

div {

color: red;

p {

kulay: dilaw;

.span {

kulay: pink;

}

}

}

Elemento literal "namuhunan" sa isa't isa.

preprocessor direktiba

Ang paggamit ng @import direktiba maaaring mag-import ng mga file. Halimbawa, mayroon kaming fonts.sass file ipinapahayag ng mga estilo para sa mga font. Ikonekta ito sa ang pangunahing file style.sass: @import 'font'. Tapos na! Sa halip ng isang solong malaking file na may mga estilo mayroon kaming ilang mga na maaaring magamit para sa mabilis at madaling access sa ang mga kinakailangang mga katangian.

hagfish

Isa sa mga pinaka-kagiliw-giliw na ideya. Ito ay nagpapahintulot sa isang linya upang humingi ng isang hanay ng mga katangian. Magpapatakbo ang mga sumusunod:

@mixin largeFont {

font-family: 'Times New Roman';

font-size: 64px;

line-height: 80px;

font-weight: bold;

}

Hagfish mag-apply sa elemento sa pahina, gamitin ang directive @ isama. Halimbawa, nais naming ilapat ito sa header h1. Mayroon kaming ang mga sumusunod na istraktura: h1 {@ isama: largeFont; }

Ang lahat ng mga katangian ng hagfish ay nakatalaga sa isang h1 elemento.

preprocessor Mas

Syntax Sass naalala programming. Kung ikaw ay naghahanap para sa isang pagpipilian na ay mas angkop para sa mga nagsisimula sa pag-aaral ng CSS, hanapin Less. Ito ay nilikha noong 2009. Ang pangunahing tampok - suporta para sa CSS katutubong syntax, kaya pamilyar sa programming Imposer ito ay magiging mas madali upang matuto.

Ang mga variable ay ipinahayag gamit ang @ simbolo. Halimbawa: @fontSize: 14px;. Nesting gawa sa parehong prinsipyo tulad ng sa Sass. Hagfish ay inihayag ang mga sumusunod: .largeFont () {font-family: 'Times New Roman'; font-size: 64px; line-height: 80px; font-weight: bold; }. Upang ikonekta ito ay hindi kinakailangan upang gamitin ang pre-processor direktiba - idagdag lamang ang nilikhang bagong hagfish sa mga katangian ng piniling elemento. Halimbawa: h1 {.largeFont; }.

pluma

Ang isa pang pre-processor. Nilikha noong 2011 sa pamamagitan ng parehong may-akda, na nagbigay sa mundo ang Jade, Express at iba pang mga kapaki-pakinabang na mga produkto.

Variable ay maaaring ipinahayag sa dalawang paraan - alinman tahasan o nang kataon. Halimbawa: font = 'Times New Roman'; - isang implicit opsyon. Ngunit $ font = 'Times New Roman' - malinaw. Hagfish ay ipinahayag at nang kataon konektado. Ang syntax ay ang mga sumusunod: redColor () kulay pula. Ngayon ay maaari naming idagdag ang item, halimbawa: h1 redColor ();.

Stylus sa unang sulyap maaaring mukhang hindi kayang unawain. Kung saan ay ang "katutubong" brackets at mga semicolon? Ngunit ito ay kinakailangan upang ulos sa ito, ang lahat ay magiging magkano ang mas malinaw. Tandaan, gayunpaman, na ang pang-matagalang pag-unlad ng pre-processor na ito ay maaaring "mawalay" gamitin mo ang klasikong CSS syntax. Ito kung minsan ay nagiging sanhi ng mga problema kapag nagkakaroon upang gumana sa isang "purong" style.

Ano ang pre-processor pipiliin?

Sa katunayan, ito ay ... hindi bale. Lahat ng mga bersyon ay nag-aalok ang tungkol sa parehong mga tampok lamang ang syntax ng bawat ay naiiba. Inirerekomenda namin upang magpatuloy bilang mga sumusunod:

• kung ikaw - programmer at nais upang gumana sa estilo pareho sa code, gamitin ang Sass;
• kung ikaw - isang coder at nais upang gumana sa mga estilo tulad ng sa maginoo layout, bigyang-pansin ang Mas kaunti;
• kung gusto mo minimalism, gamitin ang stylus.

Para sa lahat ng mga variant ng isang walang katapusang bilang ng mga kagiliw-giliw na mga aklatan na maaaring kahit na higit pang gawing simple pag-unlad. Mga gumagamit Sass inirerekumenda na bigyang-pansin ang Compass - isang makapangyarihang kasangkapan na may maraming mga built-in na mga tampok. Halimbawa, pagkatapos mong i-install ito sa iyo ay hindi kailanman kailangang mag-alala tungkol sa mga vendor bersiyon prefix. Pinadadali gumana sa grids. May mga tool para sa nagtatrabaho sa mga bulaklak, sprites. Ang hanay na inihayag hagfish. Magbigay ng tool na ito ng ilang mga araw - kaya ikaw ay i-save ng maraming oras at pagsisikap sa hinaharap.