Preprocessor CSS: шарҳи, интихоб, барнома

Комилан ҳамаи Интернет-дизайнерҳо ботаҷриба истифода preprocessor. ҳастанд, нест, истисно нест. Агар шумо хоҳед, ки ба муваффақият дар ин фаъолият, дар бораи ин барномаҳо фаромӯш накунед. Дар назари аввал, онҳо метавонанд як даҳшати ором эскизи боиси - он ҳам монанд ба барнома аст! Дар асл, шумо метавонед бо тамоми хусусиятҳои preprocessor CSS барои бораи як рӯз сару кор мекунанд, ва агар шумо кӯшиш кунед, пас якчанд соат. Дар оянда, ки онҳо ба таври назаррас хоҳад кард ҳаёти шумо содда.

Чӣ тавр preprocessor CSS

Барои беҳтар фаҳмидани хусусиятҳои ин технология, ба таври мухтасар ба таърихи презентатсияи саҳифаҳои Web чуқур омӯхтани.

Вақте ки танҳо танҳо шурӯъ истифодаи азими Интернет, ҳеҷ варақаҳои сабки вуҷуд надошт. Иҷрои ҳуҷҷатҳои пурра ба браузери вобаста аст. Ҳар яке аз онҳо сабки худро, ки барои табобати барчаспҳои муайян истифода бурда шуда буд. Мутобиқан, саҳифаҳо гуногун вобаста ба тартиботе, ки браузери шумо онҳоро воз кунанд. Дар натиҷа - ба бесарусомонӣ, нофаҳмиҳо, мушкилот барои таҳиякунандагони.

Дар соли 1994, Håkon Lie олими Норвегия таҳия сабки варақ, ки метавонад барои пайдоиши саҳифаҳои алоҳида аз HTML-ҳуҷҷати истифода бурда мешавад. Дар priglanulas фикри аъзои W3C, ки фавран ба хатми муқаррар карда мешавад. Чанд сол баъд аз ӯ ба табъ як нусхаи аввали мушаххасоти CSS аст. Баъд ӯ доимо такмил дода шуд, мавриди такмил ... Аммо консепсияи боқӣ ҳама ҳамон: ҳар як сабки муқаррар хосиятҳои муайян.

Бо истифода аз мизҳои CSS ҳамеша мушкилсоз буд. Масалан, Интернет-дизайнерҳо аксаран мушкилоти бо ҷобаҷогузорӣ ва гурӯҳбандӣ кардани хусусиятҳои буд, ва мерос аст, осон нест.

Ва он гоҳ омада, ду thousandth. Маркировкаи ҳарчи бештар сар ба машғул шудан таҳиягарон Асосӣ-охири касбӣ, ки муҳим аст, ба сабкҳои кор фасењ ва динамикӣ. Вуҷуд дар љойгир вақт талаб префикси CSS ва пайгирии дастгирии имкониятҳои нави браузери. Сипас, аз тарафи JavaScript ва коршиносони Руби ба соҳибкорӣ гирифта, эҷоди preprocessor - абарсохторе барои CSS, хусусиятҳои нав ба он илова шуда.

CSS барои шурӯъкунандагон: Хусусиятҳои preprocessor

Онҳо якчанд вазифаҳои доранд, ки:

• муттаҳид префикси браузери ва khaki;

• содда синтаксиси;

• диҳад, имконияти ба кор бо selectors лонаӣ бидуни хатогиҳо;

• беҳтар намудани ороиши мантиқи.

Дар кӯтоҳ аст: preprocessor илова мекунад имкониятњои мантиқи барномасозии CSS. тағйирёбандаҳои, вазифа, hagfish, давраҳои шароити: Акнун, ороиши аст, ки дар рӯйхати муқаррарии сабкҳои ва бо як чанд усулњои содда ва равишҳои анҷом нест. Илова бар ин, қобилияти истифода бурдани математика.

Дидани маъруфияти ин илова-надстройкаҳо, ки W3C оғоз доданд тадриҷан илова имконияти онҳо дар рамзи CSS аст. Масалан, дар дастури то Функсияи calc (), вуҷуд дорад, ки аз ҷониби бисёре аз браузерҳои дастгирӣ карда мешавад. Интизор меравад, ки ба зудӣ ба он имконпазир мегардад, ба танзим тағйирёбандаҳои ва эҷоди як hagfish. Бо вуҷуди ин, ки ин дар оянда дур аллакай дар ин ҷо рӯй медиҳад ва preprocessors ва аллакай хуб кор мекунанд.

preprocessors маъруф CSS. Sass

Таҳиягар соли 2007. Дар ибтидо як ҷузъи Haml - як HTML Шаблон. хусусиятҳои нав барои унсурҳои CSS назорати таҳиягарон relished оид ба Руби оид ба зеҳи, ки сар ба онро бигустурда дар ҳама ҷо. Дар Sass шумораи зиёди гардидани он, ки ҳоло дар ҳама гуна preprocessor дохил: тағйирёбандаҳои, ҷосозии аз selectors, hagfish (он гоҳ, вале ин гуфтаҳо мумкин нест илова карда шавад).

тағйирёбандаҳои эълон дар Sass

Тағйиротҳое, ки бо аломати $ эълон кард. Онҳо метавонанд хосиятҳои ва маҷмӯи онҳо нигоҳ, масалан: "$ borderSolid: сурх сахт 1px;". Дар ин мисол, мо як тағйирёбанда даъват borderSolid эълон ва наҷот он қадр сурх 1px сахт. Ҳоло, агар дар CSS мо лозим аст, то паҳнои сарҳад сурх 1px, танҳо нишон медиҳад, ки баъд аз номи тағйирёбанда амвол. Пас аз эълон намудани тағйирёбандаҳои тағир додан мумкин нест. якчанд вазифаҳои сохта-дар аст. Барои мисол, эълон тағйирёбанда бо арзиши $ redcolor # FF5050. Акнун, ки дар рамзи CSS дар хосиятҳои ягон унсури, истифода аз он ба танзим ранги дар: саҳ {ранги: $ redColor; }. Оё шумо мехоҳед, ки ба озмудани бо ранги? Истифода Функсияи резанд ва ё кам кунад. Ин аст, чунин кард: саҳ {ранги: резанд ($ redColor, 20%); }. Дар натиҷа, redColor ранги мешавад 20% сабуктар.

Дар Sass бисёр сохта-дар вазифаҳои. Ба маблағи на камтар аз онҳо хонда шуд, вале беҳтар аст - ба ёд.

nesting

Пештар, нишон nesting буд, истифода тарҳи дароз ва нороҳат. Тасаввур кунед, ки мо дар як Лиг, аст, ки саҳ, ва дар он, дар навбати худ, танзим span. Барои Лиг, мо бояд ба танзим ранги сурх, ки барои саҳ - зард, барои давомоти - гулобиранги. Дар CSS маъмулӣ аз он ба таври зерин иҷро:

Лиг {

Ранги: сурх;

}

Лиг саҳ {

ранги: зард;

}

Лиг саҳ span {

ранги: гулобиранги;

}

Бо preprocessor CSS ҳама осонтар ва бештар фишурда мегардад:

Лиг {

Ранги: сурх;

саҳ {

ранги: зард;

.span {

ранги: гулобиранги;

}

}

}

Унсурҳои аслан «сармоягузорӣ» якдигар.

дастурьои preprocessor

Истифодаи дастурьои @import метавонед файлҳои ворид мекунад. Масалан, мо файли fonts.sass, ки сабкҳои барои ҳуруфҳои эълон. ба style.sass файли асосии пайваст: @import 'ҳуруфҳои ». Шуд! Ба ҷои он ки як файл калон ягона бо сабкҳои мо як чанд, ки мумкин барои дастрасии тез ва осонро ба хосиятҳои зарурӣ истифода бурда мешавад.

hagfish

Яке аз ғояҳои ҷолибтарин. Ин имкон медиҳад, як хати ба мепурсанд маҷмӯи хосиятҳои. Фаъолият таври зерин аст:

@mixin largeFont {

ҳарф-оилаи: 'Times New Рум';

ҳарф-андозаи: 64px;

хати-баландии: 80px;

ҳарф-вазн: далер;

}

Hagfish ба кор бурдани ба элементи дар саҳифаи истифода @include дастури аст. Масалан, мо мехоҳем, ба кор бурдани он ба сарлавҳаи h1 аст. Мо сохтори зерин: h1 {@include: largeFont; }

Ҳамаи хосияти hagfish шудаанд унсури h1 гузошта мешавад.

preprocessor Камтар

Наҳвӣ Sass ба хотир меорад барномасозӣ. Агар шумо ҷустуҷӯ барои хосият ин аст, ки бештар муносиб барои шурӯъкунандагон таҳсили CSS, барои камтар назар. Он дар соли 2009 таъсис дода шуд. Хусусияти асосии - дастгирии CSS наҳвӣ модарӣ, то ношинос бо Imposer барномањо осонтар ба ёд хоҳад буд.

Дар тағйирёбандаҳои истифода @ рамзи эълон кард. Барои мисол: @fontSize: 14px;. корҳои Nesting оид ба принсипҳои ҳамон тавре, ки дар Sass. .largeFont () {ҳарф-оилаи: Hagfish ба таври зерин эълон 'Times New Рум'; ҳарф-андозаи: 64px; хати-баландии: 80px; ҳарф-вазн: далер; }. Барои пайваст шудан ба он аст, ниёзе ба истифода роњбарии preprocessor - танҳо илова hagfish навтаъсис дар хосияти унсури интихобшуда. Барои мисол: h1 {.largeFont; }.

Stylus

preprocessor дигар. Cохта шуд, дар соли 2011 аз ҷониби муаллиф ҳамон, ки ҷаҳон Jade, Express ва дигар маҳсулоти муфид дод.

Тағйиротҳое, мумкин аст, дар ду роҳҳои эълон - ё бевосита ё бегуфтугӯ. Барои мисол: ҳарф = 'Times New Рум'; - вариант пурраи. Аммо $ ҳарф = 'Times New Роман »- равшан. Hagfish доранд, эълон ва бегуфтугӯ пайваст. Дар наҳвӣ чунин аст: redColor (), сурх ранги. Акнун мо метавонем адад Масалан илова,: redColor h1 ();.

Stylus дар назари аввал шояд нофаҳмо тобад. дар ќавс ва semicolons «модарӣ» дар куҷост? Аммо лозим ба беҳудагӣ машғул ба он аст, ки ҳар қадар равшантар мегардад. Дар хотир доред, вале, ки ба рушди дарозмуддат ин preprocessor метавонад «бозгиранд," шумо истифода наҳвӣ CSS классикӣ. Ин баъзан боиси мушкилот, вақте ки ба кор бо сабки «пок».

Чӣ preprocessor интихоб кунед?

Дар асл, он аст, ... ба он аҳамият надорад. Ҳамаи шакл дар бораи хусусиятҳои ҳамон пешниҳод танҳо наҳвӣ ҳар гуногун аст. Мо тавсия медиҳем, ки давом диҳед зайл аст:

• Агар ту - барномасоз ва мехоҳед, ки ба кор бо сабкҳои ҳам дар Кодекси истифода Sass;
• Агар ту - як coder ва мехоҳед, ки ба кор бо сабкҳои чун бо тарҳбандии анъанавӣ, диққат ба Камтар;
• Агар шумо мехоҳед minimalism истифода Stylus.

Зеро ки ҳамаи вариантњои шумораи беохир китобхонаҳои шавқовар, ки ҳатто дар оянда метавонад соддатар рушд. Истифодабарандагон Sass тавсия ба диққати ба Компас - асбоби тавоно бо бисёр хусусиятҳои сохта-дар. Масалан, баъди он ки шумо онро коргузорӣ шумо ҳаргиз доранд, хоҳад, ки дар бораи префикси нусхаи фурӯшанда хавотир. Содда бо хатҳои кор мекунанд. олоти барои кор бо гул, sprites нест. Як қатор аллакай эълон hagfish. Бидеҳ ин асбоби якчанд рўз - Ҳамин тавр шумо бисёр вақт ва саъю кӯшиш дар оянда захира кунед.