Препроцессор CSS: агляд, выбар, прымяненне

Абсалютна ўсе дасведчаныя вярстальшчыкі выкарыстоўваюць препроцессора. Выключэнняў няма. Калі вы жадаеце дамагчыся поспеху ў гэтай дзейнасці, не забывайце аб гэтых праграмах. З першага погляду яны могуць выклікаць у пачаткоўца ціхі жах - гэта ўжо занадта падобна на праграмаванне! На самай справе можна разабрацца з усімі магчымасцямі препроцессора CSS прыкладна за дзень, а калі пастарацца, то і за пару гадзін. У далейшым яны істотна спросцяць вам жыццё.

Як з'явіліся препроцессора CSS

Каб лепш зразумець асаблівасці гэтай тэхналогіі, ненадоўга пагрузіліся ў гісторыю развіцця візуальнага прадстаўлення вэб-старонак.

Калі толькі-толькі пачалося масавае прымяненне інтэрнэту, ніякіх табліц стыляў не існавала. Афармленне дакументаў залежала выключна ад браўзэраў. У кожным з іх былі свае стылі, якія выкарыстоўваліся для апрацоўкі пэўных тэгаў. Адпаведна, старонкі выглядалі па-рознаму ў залежнасці ад таго, у якім браўзэры вы іх адчынялі. Вынік - хаос, блытаніна, праблемы для распрацоўнікаў.

У 1994 годзе нарвежская навуковец Хокан Лі распрацаваў табліцу стыляў, якая магла выкарыстоўвацца для афармлення знешняга выгляду старонкі асобна ад HTML-дакумента. Ідэя пригланулась прадстаўнікам кансорцыума W3C, якія адразу ж узяліся за яе дапрацоўку. Праз некалькі гадоў выйшла ў свет першая версія спецыфікацыі CSS. Затым яна стала ўдасканальвалася, дапрацоўвалася ... Але канцэпцыя заставалася ўсё той жа: кожнаму стылю задаюцца пэўныя ўласцівасці.

Выкарыстанне табліц CSS заўсёды выклікала пэўныя праблемы. Напрыклад, у вярстальшчыкі часта ўзнікалі цяжкасці з сартаваннем і групоўкай уласцівасцяў, ды і з ўспадкоўванне не ўсё так адназначна.

І вось наступілі двухтысячныя. Разметкай ўсё часцей пачалі займацца прафесійныя фронтенд-распрацоўшчыкі, для якіх важная была гнуткая і дынамічная праца са стылямі. Які існаваў на той момант CSS патрабаваў расстаноўкі прэфіксаў і адсочвання падтрымкі новых магчымасцяў браўзэраў. Тады спецыялісты па JavaScript і Ruby ўзяліся за справу, стварыўшы препроцессора - надбудовы для CSS, якія дадаюць у яго новыя магчымасці.

CSS для пачаткоўцаў: асаблівасці препроцессора

Яны выконваюць некалькі функцый:

• уніфікуюць браузерные прэфіксы і хакі;

• спрашчаюць сінтаксіс;

• даюць магчымасць працаваць з укладзенымі селектар без памылак;

• паляпшаюць логіку стылізацыі.

Сцісла: препроцессор дадае ў магчымасці CSS логіку праграмавання. Цяпер стылізацыя выконваецца не звычайным пералікам стыляў, а з дапамогай некалькіх простых прыёмаў і падыходаў: пераменных, функцый, миксинов, цыклаў, умоў. У дадатак з'явілася магчымасць выкарыстоўваць матэматыку.

Бачачы папулярнасць такіх надбудоў, у W3C пачалі паступова дадаваць магчымасці з іх у код CSS. Напрыклад, так у спецыфікацыі з'явілася функцыя calc (), якая падтрымліваецца многімі браўзэрамі. Чакаецца, што ў хуткім часе можна будзе задаваць зменныя і ствараць миксины. Аднак гэта адбудзецца ў далёкім будучыні, а препроцессора ўжо тут і ўжо выдатна працуюць.

Папулярныя препроцессора CSS. Sass

Распрацаваны ў 2007 годзе. Першапачаткова з'яўляўся кампанентам Haml - шаблонизатора HTML. Новыя магчымасці па кіраванні элементамі CSS прыйшліся да спадобы распрацоўнікам на Ruby on Rails, якія пачалі распаўсюджваць яго паўсюдна. У Sass з'явілася вялікая колькасць магчымасцяў, якія цяпер уваходзяць у любой препроцессор: зменныя, ўкладанне селектараў, миксины (тады, аднак, у іх нельга было дадаваць аргументы).

Аб'яву зменных у Sass

Зменныя абвяшчаюцца з дапамогай знака $. У іх можна захоўваць ўласцівасці і іх наборы, напрыклад: "$ borderSolid: 1px solid red;". У гэтым прыкладзе мы абвясцілі зменную пад назвай borderSolid і захавалі ў ёй значэнне 1px solid red. Цяпер, калі ў CSS нам спатрэбіцца стварыць чырвоны border шырынёй у 1px, проста паказвае гэтую зменную пасля назвы ўласцівасці. Пасьля абвяшчэньня зменныя мяняць нельга. Даступна некалькі ўбудаваных функцый. Напрыклад, аб'явім зменную $ redColor са значэннем # FF5050. Цяпер у кодзе CSS, ва ўласцівасцях якога-небудзь элемента, выкарыстоўваем яе для задання колеру шрыфта: p {color: $ redColor; }. Хочаце паэксперыментаваць з колерам? Выкарыстоўвайце функцыі darken або lighten. Гэта робіцца так: p {color: darken ($ redColor, 20%); }. У выніку колер redColor стане на 20% святлей.

У Sass шмат ўбудаваных функцый. Рэкамендуем як мінімум азнаёміцца з імі, а лепш - вывучыць.

укладзенасць

Раней для абазначэння ўкладзенасці даводзілася выкарыстоўваць доўгія і нязручныя канструкцыі. Уявім, што ў нас ёсць div, у якім ляжыць p, а ў ім, у сваю чаргу, размешчаны span. Для div нам трэба задаць колер шрыфта red, для p - yellow, для span - pink. У звычайным CSS гэта рабілася б наступным чынам:

div {

color: red;

}

div p {

color: yellow;

}

div p span {

color: pink;

}

З дапамогай препроцессора CSS усё робіцца прасцей і кампактней:

div {

color: red;

p {

color: yellow;

.span {

color: pink;

}

}

}

Элементы літаральна «ўкладваюцца» адна ў адну.

дырэктывы препроцессора

З дапамогай дырэктывы @import можна імпартаваць файлы. Напрыклад, у нас ёсць файл fonts.sass, у якім абвешчаныя стылі для шрыфтоў. Падлучальны яго ў асноўны файл style.sass: @import 'fonts'. Гатова! Замест аднаго вялікага файла са стылямі у нас ёсць некалькі, якія можна выкарыстоўваць для хуткага і лёгкага доступу да патрабаваным уласцівасцях.

Миксины

Адна з самых цікавых задумак. Дае магчымасць адной радком задаваць цэлы набор уласцівасцяў. Працуюць наступным чынам:

@mixin largeFont {

font-family: 'Times New Roman';

font-size: 64px;

line-height: 80px;

font-weight: bold;

}

Каб прымяніць миксин да элемента на старонцы, выкарыстоўваем дырэктыву @include. Напрыклад, мы хочам прымяніць яго да загалоўка h1. Атрымліваецца наступная канструкцыя: h1 {@include: largeFont; }

Усе ўласцівасці з миксина будуць прысвоены элементу h1.

препроцессор Less

Сінтаксіс Sass нагадвае пра праграмаванні. Калі вы шукаеце варыянт, які больш падыходзіць вывучаюць CSS для пачаткоўцаў, звярніце ўвагу на Less. Ён быў створаны ў 2009 годзе. Галоўная асаблівасць - падтрымка натыўнага сінтаксісу CSS, так што незнаёмым з праграмаваннем вярстальшчыкі яго будзе прасцей асвоіць.

Зменныя абвяшчаюцца з дапамогай сімвала @. Напрыклад: @fontSize: 14px ;. Укладзенасць працуе па тым жа прынцыпам, што і ў Sass. Миксины абвяшчаюцца наступным чынам: .largeFont () {font-family: 'Times New Roman'; font-size: 64px; line-height: 80px; font-weight: bold; }. Для падлучэння не трэба выкарыстоўваць дырэктывы препроцессора - проста дадайце свежесозданный миксин ва ўласцівасці абранага элемента. Напрыклад: h1 {.largeFont; }.

Stylus

Яшчэ адзін препроцессор. Створаны ў 2011 годзе тым жа аўтарам, што падарыў свету Jade, Express і іншыя карысныя прадукты.

Зменныя можна аб'яўляць двума спосабамі - відавочна або няяўна. Напрыклад: font = 'Times New Roman'; - гэта няяўнай варыянт. А вось $ font = 'Times New Roman' - відавочны. Миксины аб'яўляюцца і падключаюцца няяўна. Сінтаксіс такі: redColor () color red. Цяпер можам дадаць яго элементу, напрыклад: h1 redColor () ;.

На першы погляд Stylus можа здацца незразумелым. Дзе «родныя» дужкі і кропкі з коскай? Але варта толькі ў яго пагрузіцца, як усё становіцца нашмат больш ясным. Аднак памятайце, што працяглая распрацоўка з гэтым препроцессором можа «адвучыць» вас выкарыстоўваць класічны сінтаксіс CSS. Гэта часам выклікае праблемы пры неабходнасці працаваць з «чыстымі» стылямі.

Які препроцессор абраць?

На самай справе гэта ... не мае значэння. Усе варыянты прадастаўляюць прыкладна аднолькавыя магчымасці, проста сінтаксіс у кожнага розны. Рэкамендуем дзейнічаць наступным чынам:

• калі вы - праграміст і хочаце працаваць са стылямі як з кодам, выкарыстоўвайце Sass;
• калі вы - вярстальнік і хочаце працаваць са стылямі як са звычайнай вёрсткай, звярніце ўвагу на Less;
• калі вы любіце мінімалізм, скарыстайцеся Stylus.

Для ўсіх варыянтаў даступна велізарная колькасць цікавых бібліятэк, здольных яшчэ мацней спрасціць распрацоўку. Карыстальнікам Sass рэкамендуецца звярнуць увагу на Compass - магутны інструмент з мноствам ўбудаваных магчымасцяў. Напрыклад, пасля яго ўстаноўкі вам ужо ніколі не прыйдзецца турбавацца аб вендорных прэфіксаў. Спрашчаецца праца з сеткамі. Маюцца утыліты для працы з кветкамі, спрайт. Даступны шэраг ўжо абвешчаных миксинов. Надасце гэтага сродку пару дзён - тым самым вы зэканоміце нямала сіл і часу ў будучыні.