За что ты послал нам препроцессоры? Чем мы тебя прогневали?

В наших про­ек­тах в Коде мы исполь­зу­ем про­стой CSS-код. Он ком­пакт­ный и понят­ный. Но у нас малень­кие про­ек­ты.

В боль­ших про­ек­тах CSS-код раз­рас­та­ет­ся настоль­ко, что его под­держ­ка и сопро­вож­де­ние ста­но­вит­ся отдель­ной слож­ной зада­чей. Что­бы её упро­стить, исполь­зу­ют пре­про­цес­со­ры.

Что такое препроцессоры

Пре­про­цес­сор — инстру­мент, кото­рый берёт текст из одно­го доку­мен­та, пре­об­ра­зу­ет его по нуж­ным пра­ви­лам, и на выхо­де полу­ча­ет­ся дру­гой текст. В слу­чае с CSS пре­про­цес­со­ры состав­ля­ют финаль­ный CSS-документ на осно­ве более про­сто­го кода.

Пред­ставь­те, что у вас в про­ек­те 30 раз­ных сти­лей CSS-кнопок. Они нуж­ны для раз­ных дел: одни опас­ные, дру­гие без­опас­ные, одни актив­ные, дру­гие выклю­че­ны и т. д. И есть ещё фор­мы вво­да и дру­гие интер­фейс­ные эле­мен­ты, внеш­ний вид кото­рых про­пи­сан в CSS.

И вот у всех этих эле­мен­тов сей­час сто­ит пара­метр border-radius: 7px, то есть скруг­ле­ние по углам — семь пик­се­лей. И вдруг при­хо­дит дизай­нер и гово­рит: «Всё про­па­ло, ставь скруг­ле­ние 8 пик­се­лей!» Вы тер­пе­ли­во захо­ди­те в CSS-файл и в 30 местах меня­е­те 7px на 8px.

При­хо­дит дизай­нер и гово­рит: «Миша, всё ерун­да, давай по новой. Теперь 6 пик­се­лей». Мож­но запу­стить в дизай­не­ра сту­лом, а мож­но исполь­зо­вать пре­про­цес­сор.

С пре­про­цес­со­ром у вас 30 кно­пок, в кото­рых будет вот так:

border-radius: $defaultBorderRadius

А где-то в отдель­ном месте доку­мен­та будет один раз напи­са­но:

$defaultBorderRadius: 7px;

И когда дизай­нер при­дёт менять скруг­ле­ние на кноп­ках, вы изме­ни­те его один раз, в одном месте, не нано­ся телес­ные повре­жде­ния дизай­не­ру.

Какие бывают препроцессоры CSS

Sass. Появил­ся в 2006 году как спо­соб упро­стить рабо­ту с CSS и сра­зу стал попу­ля­рен у раз­ра­бот­чи­ков. Неко­то­рые счи­та­ют, что у Sass невы­со­кая ско­рость рабо­ты, но на прак­ти­ке это мож­но заме­тить толь­ко на очень боль­ших про­ек­тах.

Любо­пыт­но, что у Sass есть два син­так­си­са:

  • Sass — самый пер­вый вари­ант, где не исполь­зу­ют­ся фигур­ные скоб­ки, а всё сде­ла­но на отсту­пах, как в Python.
  • SCSS — в нём есть фигур­ные скоб­ки, как в род­ном CSS, а ещё есть под­держ­ка совре­мен­ных CSS-трюков, кото­рые исполь­зу­ют­ся в раз­ных бра­у­зе­рах. Этот фор­мат появил­ся после выхо­да LESS и стал отве­том кон­ку­рен­ту.

LESS. В 2009 году дру­гие про­грам­ми­сты пока­за­ли свою вер­сию пре­про­цес­со­ра, осно­ван­ную на Sass. Они взя­ли за осно­ву чистый CSS-синтаксис и доба­ви­ли в него воз­мож­ность исполь­зо­вать все рас­ши­ре­ния как в Sass. Тех­ни­че­ски это инте­рес­нее, чем про­стой Sass, но нель­зя ска­зать, что это силь­но кру­че, чем тот же SCSS.

Stylus и дру­гие. Есть и дру­гие пре­про­цес­со­ры — напри­мер, тот же Stylus. Прин­ци­пи­аль­но он дела­ет то же самое, но исполь­зу­ет дру­гой син­так­сис, более лако­нич­ный и про­стой.

Какой выбрать?

По сути все они дела­ют одно и то же: упро­ща­ют рабо­ту с CSS-кодом, поэто­му это вопрос вку­са и при­вы­чек. Если давать общие реко­мен­да­ции, мы бы сде­ла­ли так:

  • Sass (SCSS) подой­дёт тем, кто боль­ше любит про­грам­ми­ро­ва­ние, чем вёрст­ку.
  • LESS понра­вит­ся всем, кому при­гля­нул­ся чистый CSS-синтаксис, но хочет­ся сде­лать рабо­ту ещё про­ще.
  • Stylus мож­но выбрать тем, кто ценит в коде лако­нич­ность и мини­ма­лизм.

Когда использовать препроцессоры

Если у вас CSS-код зани­ма­ет не боль­ше одной-двух стра­ниц, нет смыс­ла исполь­зо­вать пре­про­цес­со­ры: настрой­ка и опи­са­ние кода зай­мёт боль­ше вре­ме­ни, чем сра­зу напи­сать то, что нуж­но. А вот если у вас боль­шой сайт с раз­ным дизай­ном на стра­ни­це или очень слож­ная CSS-вёрстка, то тут уже при­го­дят­ся пре­про­цес­со­ры.

Мы пока­жем рабо­ту пре­про­цес­со­ров на при­ме­ре SCSS-синтаксиса. Для дру­гих пре­про­цес­со­ров при­ме­ры будут выгля­деть почти так же, отли­чия толь­ко в клю­че­вых сло­вах и неко­то­рых сим­во­лах.

Пере­мен­ные. Если вы исполь­зу­е­те один и тот же фир­мен­ный цвет для ссы­лок, рамок вокруг кар­ти­нок, то мож­но задать этот цвет в одном месте, а потом обра­щать­ся к нему отку­да угод­но. Зада­дим пере­мен­ны­ми шири­ну и цвет эле­мен­та:

Было: SCSS Ста­ло: CSS
$width: 10px;
$headercolor:red;

#main h1{
width: $width;
color:$headercolor;
}

#main h1{
width: 10px;
color:red;
}

Про­стая рабо­та с вло­жен­ны­ми струк­ту­ра­ми. Когда мы дела­ли кра­си­вые ссыл­ки, то у нас была вло­жен­ная струк­ту­ра для эле­мен­та а: под­чёр­ки­ва­ние при наве­де­нии, цвет после посе­ще­ния ссыл­ки, цвет до посе­ще­ния и так далее. Вот как это мож­но орга­ни­зо­вать попро­ще:

Было: SCSS Ста­ло: CSS
a{
color: #0f7afc;
&:hover{
color: #cf0000;
}
&:visited{
color: #800080;
}
}
a {
     color: #0f7afc;
}

a:hover {

     color: #cf0000;
}

a:visited {
     color: #800080;

}

Мик­си­ны. Это то же самое, что обыч­ные функ­ции в про­грам­ми­ро­ва­нии. Их мож­но вызы­вать сколь­ко угод­но раз с любы­ми пара­мет­ра­ми. Новый пара­метр — новый резуль­тат рабо­ты мик­си­на. Ими удоб­но оформ­лять повто­ря­ю­щи­е­ся кус­ки кода в раз­ных местах.

Пред­ставь­те, что у вас есть шрифт, для кото­ро­го вы подо­бра­ли нуж­ный интер­ли­ньяж, раз­мер и тол­щи­ну. Но для меню нужен крас­ный текст, в под­сказ­ках — белый на чёр­ном фоне, а основ­ной текст исполь­зу­ет­ся как есть. Тогда мы можем напи­сать так:

Было: SCSS Ста­ло: CSS
@mixin good-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
}
.page-text {
@include good-text;
color: #000000;
}
.menu-text {
@include good-text;
color: #ff0000;
}
.tip-text {
@include good-text;
color: #ffffff;
background-color: #000000;
}
.page-text {
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #000000;
}
.menu-text {
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
}
.tip-text {
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ffffff;
background-color: #000000;
}

Чем боль­ше одно­тип­но­го кода исполь­зу­ет­ся в CSS-файле, тем про­ще из это­го сде­лать один мик­син.

Мате­ма­ти­ка, функ­ции, услов­ные опе­ра­то­ры и цик­лы. Силь­ная сто­ро­на пре­про­цес­со­ров — исполь­зо­ва­ние внут­рен­них вычис­ле­ний для полу­че­ния гото­во­го кода. Напри­мер, если вам нуж­но опи­сать несколь­ко видов шриф­та, кото­рые уве­ли­чи­ва­ют­ся на 4 пунк­та каж­дый, это мож­но сде­лать в цик­ле. Если нуж­но полу­чить точ­ную шири­ну колон­ки при раз­ном раз­ме­ре экра­на — бери­те услов­ный опе­ра­тор.

Преимущества и недостатки препроцессоров

Так как все CSS-препроцессоры дела­ют при­мер­но одно и то же, толь­ко немно­го раз­ны­ми спо­со­ба­ми, то силь­ные и сла­бые сто­ро­ны у них будут одни и те же:

✅ Хоро­шо под­хо­дят для боль­ших про­ек­тов.

✅ Силь­но рас­ши­ря­ют воз­мож­но­сти обыч­но­го CSS.

✅ Упро­ща­ют рабо­ту с одно­тип­ным кодом.

✅ Про­ще вно­сить изме­не­ния и под­дер­жи­вать код в акту­аль­ном состо­я­нии.

✅ Сра­зу вид­на логи­че­ская струк­ту­ра CSS, лег­ко разо­брать­ся в том, из чего состо­ит каж­дый эле­мент.

❌ Нет смыс­ла исполь­зо­вать в малень­ких про­ек­тах и про­стых стра­ни­цах.

❌ На выхо­де пре­про­цес­со­ра полу­ча­ет­ся CSS-код, кото­рый слож­но про­чи­тать чело­ве­ку.

❌ Нуж­но изу­чать что-то кро­ме само­го CSS.

❌ У каж­до­го пре­про­цес­со­ра свой син­так­сис, и не полу­чит­ся быст­ро перей­ти от одно­го к дру­го­му.

С чего начать

Sass → почи­тай­те sass-scss.ru, там есть всё, что нуж­но знать для рабо­ты с этим пре­про­цес­со­ром. Доку­мен­та­ция настоль­ко подроб­ная, что её мож­но осво­ить вооб­ще без опы­та рабо­ты с таким инстру­мен­том.

LESS → Путе­во­ди­тель для нович­ков по CSS-препроцессору Less. Про­сто, доход­чи­во и с кучей при­ме­ров для каж­дой коман­ды.

Stylus → если зна­е­те англий­ский, почи­тай­те офи­ци­аль­ный сайт про­ек­та. Если не зна­е­те — почи­тай­те крат­кое руко­вод­ство по исполь­зо­ва­нию и опыт раз­ра­бот­чи­ков Яндекс.Почты.