Less язык стилей для чего он нужен. Представление LESS. Используем LESS и Javascript файл

Для упрощения жизни верстальщика придумано достаточное количество фреймворков и надстроек. Сейчас пойдет речь об упрощении и ускорении написания стилей для сайтов. Для этого как известно используются каскадные таблицы стилей CSS.

LESS - это надстройка над CSS. LESS - это программируемый CSS. LESS расширяет CSS динамическими возможностями, такими как переменные, примешивания и операции.

Для того, что бы начать писать стили на LESS, достаточно знаний CSS, ничего нового изучать не нужно. Поэтому порог вхождения в данный язык очень мал.

Как перейти на LESS?

Так как LESS использует синтаксис CSS, то это означает что имеющийся CSS уже является валидным LESS. Для более удобного использоваться готового CSS в LESS, можно воспользоваться онлайн сервисами конвертирования CSS в LESS:

После того, как стили сконвертированы в LESS, создаем соответствующий файл с расширением.less, например style.less .

Использование

Вариант с компиляцией на лету не рассматривал, т.к изначально увеличивается время загрузки страницы. Поэтому лучше конвертировать вручную с использованием соответствующих приложений или плагинов:

• Winless (OS: Windows)
• LESS CSS Compiler (IDEA plugins)

Если вы используете среду разработки IDEA, то советую использовать плагин. При потере фокуса программы less будет компилироваться в css, это очень удобно 🙂

Когда есть понимание того, как работать с LESS, можно переходить к основным возможностям языка, ради которого стоит его использовать:

Переменные

Переменные позволяют определить постоянно используемые значения в одном месте, а затем повторно использовать их в любом месте таблицы стилей, что облегчает внесение глобальных изменений буквально до изменения одной строки кода.

LESS @color: #4D926F; #header { color: @color; } h2 { color: @color; } CSS #header { color: #4D926F;} h2 { color: #4D926F; } Mixins

Mixins (примешивания) позволяют включать все свойства класса в другой класс путем простого включения имени класса как значение одного из свойств.

LESS .box-sizing(@a: border-box) { box-sizing: @a; -webkit-box-sizing: @a; -moz-box-sizing: @a; } .wrapper { box-sizing; } CSS .wrapper { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } Вложенные правила

Вместо создания длинных имен селекторов для указания наследования, в Less мы можем просто вкладывать селекторы в другие селекторы. Это делает наследование прозрачнее для понимания, а таблицы стилей - короче.

LESS .content { a { text-decoration: none; &:hover { text-decoration: underline; } } } CSS .content a { text-decoration: none; } .content a:hover { text-decoration: underline; } Операции

Операции позволяют увеличивать, уменьшать, делить и умножать и значения и цвета свойств, давая возможность указывать сложные соотношения между свойствами. Довольно удобно при задании размеров пропорциональным блокам. Например, основной части сайта и сайдбара.

CSS - это простой язык. Он позволяет нам задавать стили для HTML элементов с помощью селекторов. Это просто даже для начинающих.

Однако, со временем размер вашего веб-проекта может вырасти, и вы получите большой объем повторяющегося кода CSS. Если вы столкнулись с этой проблемой, то самое время использовать препроцессор CSS.

В этом уроке мы объясним, что такое CSS-препроцессор и рассмотрим один из самых популярных: LESS.

Что такое препроцессор CSS?

CSS препроцессоры не заменяют CSS. На самом деле, препроцессоры просто дают нам дополнительные функциональные возможности, такие как переменные, операторы и функции, с которыми мы можем упростить создание и управление файлами CSS.

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

Что такое LESS?

LESS относительно новый препроцессор, ему около 4 лет. Его часто сравнивают с SASS, более старым препроцессором. Как и LESS, так и SASS, имеют свои корни в языке программирования Ruby, но в настоящее время используются гораздо шире. LESS теперь основан на Javascript.

Люди, использующие LESS, могут создать заранее определенный набор цветов для своего сайта. Они могут определить особый стиль один раз и затем многократно использовать его везде, где необходимо.

Использование LESS

Чтобы воспользоваться тем, что LESS может предложить, мы сначала должны сохранить наш CSS-код в файл с расширением .less . Использовать LESS очень просто. Он работает как на веб-сервере, так и на стороне клиента.

Этот метод работает только в современных браузерах и подходит только для использования на локальном сервере. Для рабочего сайта необходима предварительная компиляция с применением Node на веб-сервере или различные инструменты от сторонних производителей.

Некоторые из инструментов сторонних производителей:

• и многие другие...

LESS Синтаксис: Переменные

Одни из вещей, которые часто повторяются в файле CSS - это цвета. Одни и те же цвета повторяются в файлах CSS для разных элементов, заголовков, ссылок и т.д.

#header {
background-color : #CCCCCC
}
.aside {
background-color : #CCCCCC ;
color : #000000 ;
.sidebar a {
border-bottom : 1px solid #CCCCCC ;
}

В LESS, мы можем просто объявить переменную для сохранения цвета, вот так:

@grey: #CCCCCC;

И затем повторно использовать это так:

#header {
background-color : @grey;
}
.aside {
background-color : @grey;
color : #000000 ;
}
.sidebar a {
border-bottom : 1px solid @grey;
}

Мы можем также использовать переменные, чтобы сохранить другие свойства, такие как ширина, высота, размер шрифта и многие другие значения, которые вы планируете повторно использовать в различных местах стилей.

LESS Синтаксис: Mixins

Переменные полезны для повторного использования отдельных значений, таких как цвет, размер шрифта. В LESS с mixins мы можем использовать набор свойств из одного или нескольких правил. Mixins могут быть использованы, например, для определения стиля границ, размер шрифта и т.д.

Border_top_bottom {
border-top : dotted 1px #000 ;
border-bottom : solid 2px #000 ;
}

В приведенном выше коде мы определили верхнюю и нижнюю границу внутри класса border_top_bottom. Теперь, когда мы хотим добавить эти стили к другими элементами, мы можем использовать их так:

#header {
color : #000000 ;
.border_top_bottom;
}
.content a {
color : #000000 ;
.border_top_bottom;
}

Приведенный выше код выведет следующее:

#header {
color : #000000 ;

}
.content a {
color : #000000 ;
border-top : dotted 1px #000000 ;
border-bottom : solid 2px #000000 ;
}

Чтобы добавить больше гибкости, mixins также позволят нам передавать переменные (называемые здесь параметры). Например:

Border-radius (@radius: 5px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}

В приведенном выше примере, мы задали параметр для радиуса. Мы также дали ему значение по умолчанию равное 5px, которое не является обязательным. Теперь мы хотим добавить это для класса button:

Button {
.border-radius(6px ) ;
}

Если мы уберем 6px из приведенного выше примера, границы радиуса будут заданы по умолчанию, который указан в нашем классе border-radius и равен 5px.

Синтаксис LESS: Nesting

Одна из вещей, распространеных в CSS, это длинные селекторы, которые нам часто приходится писать для стилей дочерних элементов:

nav { }
nav li { }
nav li a { }
nav li a:hover { }
nav li a.active { }
nav li a.visited { }

И если у вас есть несколько подуровней выпадающего меню, то это становится более сложным для понимания. В LESS это может быть записано как:

nav {
li {
a {
& :hover { }
& :active { }
& :visited { }
}
}
}

Символ "&" используется перед псевдо-классами в нашей вложенной структуре. Описанную выше конструкцию гораздо легче понять и показать иерархию именно так, как она есть.

Синтаксис LESS: Операции

LESS также позволяет нам выполнять такие операции как сложение, вычитание, умножение и деление числовых значений, цветов и переменных в таблице стилей. Допустим, мы объявили переменную padding , которая применяется ко всем нашим элементам H1. Но теперь мы хотим добавить дополнительный отступ для нашего заголовка на главной странице. Мы можем сделать это следующим образом:

@padding: 5px;
h1 {
padding : @padding;
}
h1.page-title {
padding : (@padding * 2);
}

Значение по умолчанию будет умножено на 2, что задаст заголовку на главной странице padding равный 10px. Операции должны выполняться в круглых скобках, однако они могут также работать без скобок.

Синтаксис LESS: Scope

Область действия в LESS похожа на область действия в других языках программирования. Переменные и mixins сначала ищутся на локальном уровне, и если они не найдены, то компилятор будет искать их в родительской области и так далее.

@var: red;

#page {
@var: white;

#header {
color : @var; // выведет white
}
}
#footer {
color : @var; // выведет red
}

Заключение

Эта статья не охватывает все что LESS может предложить. Цель состоит в том, чтобы объяснить, как используя LESS можно помочь нам сделать наш CSS более динамичным. CSS препроцессоры позволяют нам создавать и управлять CSS более эффективно. Даже имея хорошее понимание CSS, LESS позволит нам использовать его более продуктивно.

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим

CSS - простой и доступный инструмент. Однако, он имеет свои ограничения, особенно когда встает вопрос о сопровождении готового кода. Когда нужно модифицировать тысячи строк со стилями, разделенных по нескольким файлам, задача становится проблемой.

Для преодоления проблемы созданы препроцессоры CSS, которые позволяют комбинировать стили динамически. Существует несколько вариантов (например, LESS и SASS), но в данном уроке мы рассмотрим LESS .

Редактор LESS

На момент написания урока существовал единственный редактор, целиком посвященный работе с файлами LESS - ChrunchApp . Данное приложение кросс платформенное, построенное на Adobe Air , его можно запускать на Windows, Mac OSX and Linux.

Для других редакторов (таких как Dreamweaver, Coda, NotePad++ и SublimeText 2) существуют плагины или дополнения, которые позволяют организовать подсветку синтаксиса LESS.

Использование LESS

Использовать LESS очень просто. Нужно просто добавить две строки в тег head вашего документа HTML. Первая строка содержит название вашего файла.less, а вторая строка - подключение библиотеки less.js (ее можно скачать с официального сайта).

В нашем уроке мы покажем другой способ. Мы будем использовать компилятор LESS: для Windows можно применять WinLess , а для Mac OSX - LESS.app .

Создаем файл.less в рабочей директории. Затем открываем компилятор (WinLESS или LESS.app) и импортируем рабочую директорию в него. компилятор найдет все файлы.less . И все. Теперь, когда бы мы не изменили файл.less , компилятор автоматически будет генерировать обычный код CSS в файл.css , который воспринимается браузером.

Остается только привязать CSS файл к документу HTML:

Синтаксис LESS

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

Переменные

Сначала рассмотрим переменные .

При работе с CSS вы вероятно часто сталкивались с ситуацией, когда повторяющееся значение устанавливалось в нескольких блоках по всей таблице стилей.

Class1 { background-color: #2d5e8b; } .class2 { background-color: #fff; color: #2d5e8b; } .class3 { border: 1px solid #2d5e8b; }

Все прекрасно, пока не придется просеивать 1000 одинаковых участков кода по всей таблице стилей, чтобы поменять значение. Такая ситуация может сложиться при работе над большим проектом.

При использовании препроцессора LESS такая проблема легко решается с помощью переменных . Переменные позволяют хранить значения, которые можно многократно использовать в таблице стилей.

@color-base: #2d5e8b; .class1 { background-color: @color-base; } .class2 { background-color: #fff; color: @color-base; } .class3 { border: 1px solid @color-base; }

В выше приведенном примере в переменной @color-base сохраняется значение #2d5e8b . И когда потребуется изменить цвет, то нужно будет поменять значение только в переменной.

В переменной можно использовать и другие значения:

@font-family: Georgia @dot-border: dotted @transition: linear @opacity: 0.5

Примешивания

В LESS можно использовать примешивания для хранения набора правил и применения их в других наборах. Например:

Gradients { background: #eaeaea; background: linear-gradient(top, #eaeaea, #cccccc); background: -o-linear-gradient(top, #eaeaea, #cccccc); background: -ms-linear-gradient(top, #eaeaea, #cccccc); background: -moz-linear-gradient(top, #eaeaea, #cccccc); background: -webkit-linear-gradient(top, #eaeaea, #cccccc); }

В Выше приведенном примере мы устанавливаем цвет градиента в классе.gradients . Затем, когда нужно добавить градиент, нужно просто вставить.gradients следующим образом:

Box { .gradients; border: 1px solid #555; border-radius: 3px; }

Класс.box наследует все объявления из.gradients . Поэтому выше приведенное выражение LESS эквивалентно следующему обычному коду CSS:

Box { background: #eaeaea; background: linear-gradient(top, #eaeaea, #cccccc); background: -o-linear-gradient(top, #eaeaea, #cccccc); background: -ms-linear-gradient(top, #eaeaea, #cccccc); background: -moz-linear-gradient(top, #eaeaea, #cccccc); background: -webkit-linear-gradient(top, #eaeaea, #cccccc); border: 1px solid #555; border-radius: 3px; }

При работе с CSS3 можно использовать библиотеку LESS ELements , чтобы облегчить свою работу. LESS Elements является коллекцией общих примешиваний CSS3, которые часто используются в стилях, например, border-radius , gradients , drop-shadow и так далее.

Чтобы использовать LESS нужно просто добавить правило @import файл LESS. Нужно только загрузить библиотеку и поместить ее в рабочую директорию.

@import "elements.less";

Теперь можно использовать все классы из elements.less . Например, чтобы добавить скругление углов рамки с радиусом 3px к элементу div , нужно написать:

Div { .rounded(3px); }

Вложенные правила

При работе с обычным CSS кодом, достаточно часто встречается следующая структура кода:

Nav { height: 40px; width: 100%; background: #455868; border-bottom: 2px solid #283744; } nav li { width: 600px; height: 40px; } nav li a { color: #fff; line-height: 40px; text-shadow: 1px 1px 0px #283744; }

В обычном CSS коде мы выбираем наследников, указывая родителя в каждом наборе правил.

В LESS можно улучшить выше приведенный набор правил с помощью вложения наследников в родительский элемент:

Nav { height: 40px; width: 100%; background: #455868; border-bottom: 2px solid #283744; li { width: 600px; height: 40px; a { color: #fff; line-height: 40px; text-shadow: 1px 1px 0px #283744; } } }

Также можно использовать псевдо-классы, например:hover , с помощью символа амперсенда (&). Допустим, мы хотим добавить:hover к тегу ссылки:

A { color: #fff; line-height: 40px; text-shadow: 1px 1px 0px #283744; &:hover { background-color: #000; color: #fff; } }

Операции

Также можно использовать операции в LESS. Доступны сложение, вычитание, умножение и деление.

Допустим, что элемент B в два раза выше элемента A:

@height: 100px .element-A { height: @height; } .element-B { height: @height * 2; }

Сначала мы определяем переменную @height и назначаем ее для указания высоты элемента А.

В элементе В мы просто умножаем значение переменной на 2. Теперь, когда мы изменяем значение переменной @height , элемент В всегда будет в два раза выше.

Область видимости

LESS использует концепцию области видимости . Сначала используются переменные из локального контекста, а если их нет, то происходит поиск в более широкой области видимости.

Header { @color: black; background-color: @color; nav { @color: blue; background-color: @color; a { color: @color; } } }

В приведенном примере header имеет переменную для цвета со значением black , но фон элемента nav будет иметь цвет blue , так как переменная @color находится в локальном контексте.

Заключение

В следующих уроках серии мы разберем пример реального использования LESS и некоторые полезные аспекты инструментария.

CSS – мощный и интересный язык стилизации страницы. Он быстрый и понятный, но что самое важное, в минимальной версии поддерживается абсолютно всеми браузерами будь то небольшие мобильные устройства или огромные телевизоры.

Однако, при всех своих несомненных достоинствах у CSS есть некоторые, даже не недостатки, но ограничения. Эти ограничения не являются критичными, но могут значительно растянуть время разработки проекта.

Какие это могут быть ограничения. Например, цвет. Если мы видим запись вида #FF9F94 , то невозможно сходу установить, что она обозначает темно-персиковый цвет. Гораздо проще создать переменную, например darkPeach , присвоить ей значение #FF9F94 и далее в таблице стилей использовать эту переменную. Какие удобства это может за собой принести: не нужно помнить код цвета для указания его в другом месте, для смены одного цвета по всей таблице достаточно просто поменять значение переменной.

Другими словами, CSS не хватает немного программирования и логики, чтобы сделать работу с ним более практичной. Хорошо, что для этого существует ряд инструментов, среди которых есть LESS.

Что такое LESS?

LESS – это динамический язык стилей, своеобразная надстройка над CSS, которая добавляет в CSS некоторый набор динамических свойств: переменные, примешивания, операции, функции и т.д.

LESS – это скрипт, который может использоваться как на стороне клиента (CSS-таблица рассчитывается в браузере пользователя), так и на стороне. Однако существуют более удачные способы использовать LESS – например, предварительная компиляция таблицы. В таком случае можно получить стандартную таблицу стилей, которая будет правильно использоваться браузером и не требовать постоянно конвертировать ее заново.

Переменные

Переменные в LESS работают точно так же, как и в других языках программирования. Вы создаете переменную, присваиваете ей значение, а дальше можете использовать ее в любом правиле CSS. Например:

@serif-font: Georgia; h1, h2, h3, h4 {font-family: @serif-font;} .large-text {font-family: @serif-font;}

В данном случае переменная @serif-font хранит в себе название шрифта. Если нужно поменять шрифт Georgia на Times New Roman, то достаточно сменить значение переменной и значение шрифта изменится во всем документе. Еще удобнее использовать переменные с кодами цветов. Например, следующий отрывок CSS

Body {color: #ff9900; background-color:#cccccc;} p {color: #ff9900;} h1 {color: #ff9900;}

можно заменить следующим:

@color-orange: #ff9900; @color-gray: #cccccc; body {color: @color-orange; background-color: @color-gray;} p {color: @color-orange;} h1 {color: @color-orange;}

Как видите, достаточно исправить цвета в заголовке вашего CSS-документа, чтобы исправить их по всему документу.

У переменных есть области видимости. Внутри каждого правила можно переназначать значение переменной для этого правила. В следующем примере цвет ссылки будет белый, а цвет фона кнопки – серый:

@color: #сссссс; a { @color: #ffffff; color:@color;} button { background: @color;}

Важно заметить, что переменные в LESS скорее ближе к константам, так как переназначить их ниже по коду невозможно, только внутри определенных правил.

Операции

LESS позволяет использовать операции внутри правил, что позволяет добиться точного контроля за значениями:

Button{ @unit: 3px; border:@unit solid #ddd; padding: @unit * 3; margin: @unit * 2; }

Как видно из кода выше, переменная @unit получает значение 3px . Оно подставляется в значение ширины границы. Отступы соответственно получаются умножением этого значения на 3 или 2 .

В LESS можно использовать все арифметические действия. В качестве операндов могут выступать не только численные значения, но и цвета. Выполнять так называемое цветовое смешивание. Если вы хотите изменить значение цвета, то можете сделать это смешением или вычитанием другого цвета:

Button { background: #941f1f + #222222; border: #941f1f - #111111; }

Вышеприведённая операция с фоном увеличит каждое значение HEX на 2. Результатом будет #B64141 - более светлый вариант оригинального цвета. Операция с рамкой уменьшит каждое значение HEX на 1 и выдаст более темный цвет: #830E0E . На практике есть немало случаев, когда мы начинаем с базового цвета и нуждаемся в слегка затемненном или осветленном его варианте.

Работа с цветом

Есть и другие возможности работы с цветом. Вы можете осветлять, затемнять, насыщать, обесцвечивать и вращать цвета. Достигается это путем применения цветовых функций.

Примеры использования и результаты отображения смотрите в таблице ниже:

@color: #3d82d1; .left_box { background:lighten(@color, 20%); } .right_box { background:darken(@color, 20%); }
@color: #3d82d1;.left_box { background: desaturate(@color, 18%); } .middle_box { background: @color; } .right_box { background: saturate(@color, 18%); }
@color: #3d82d1;.left_box { background: spin(@color, 25%); } .middle_box { background: @color; } .right_box { background: spin(@color, -25%); }

Каждый цвет в LESS конвертируется в HSL (hue, saturation, lightness), чтобы обеспечить вам контроль над уровнями каналов. Благодаря этому можно манипулировать цветами более тонко, а также получить информацию о цвете напрямую:

@color = #167e8a; hue(@color); saturation(@color); lightness(@color);

Для чего это нужно? Нормальному человеку сложно распознать, какой цвет зашифрован HEX кодом, однако LESS работает не с самим кодом, а с тоном, который он задает. Допустим, вы нашли пурпурный цвет, который вам понравился (#e147d4). Но сейчас вам нужен более сливочный его оттенок, тогда вам поможет следующая конструкция из двух функций:

@color: #c480bd; .class { background-color: desaturate(spin(@color, 18), 12%);}

Вложенность

Одним из основных достоинств CSS является каскадность обновления его стилей. То есть для задания стиля параграфа внутри контейнера article нужно использовать код:

Article p { … }

И это хорошо, но что, если нужно задать еще несколько стилей для элементов внутри этого блока. Тогда придется постоянно дописывать.article перед началом определения правила. LESS позволяет вкладывать стили друг в друга, тем самым упрощая написание кода:

A { color:red; } p { margin:0px; } article { a { color: green; } p { color: #555; a { color:blue; } } }

Отступы необязательны, но они улучшают читабельность кода. Уровни вложенности не ограничены.

Примешивания (mixins)

Чтобы создать рамку, у которой скруглены верхние углы придется использовать следующий код:

Tab { -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; }

И этот кусок кода нужно переписывать каждый раз, когда необходимо сделать такое закругление. Это можно упростить с помощью LESS. Для этого нужно создать примешивание. Посмотрите пример:

Rounded-top { -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; } .top { background: #333; color:#fff; .rounded-top; ] .submit { .top; }

В данном случае мы создали и определили класс rounded-top , а затем импортировали все его правила в класс top . А все стили класа top импортированы в класс submit , в том числе и правила для фона и цвета текста.

Если вы обычно используете одинаковый border-radius , но иногда необходим другой, нужно задать примешиванию стандартное значение.

Rounded-top(@radius:6px) { -webkit-border-top-left-radius: @radius; -webkit-border-top-right-radius: @radius; -moz-border-radius-topleft: @radius; -moz-border-radius-topright: @radius; border-top-left-radius: @radius; border-top-right-radius: @radius; } .tab { background: #333; color:#fff; .rounded-top; } .submit { .rounded-top(3px); }

В данном случае в классе tab будет использоваться значение в 6px , а в классе submit в 3px . Параметры могут быть множественные.

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

Если рассматривать препроцессоры вместе с CSS, то получается картина более понятная, нежели чем рассматривать понятие препроцессора отдельно.

Определение

CSS препроцессор (от англ. CSS preprocessor) — это надстройка над CSS, которая добавляет ранее недоступные возможности для CSS, с помощью новых синтаксических конструкций.

Основная задача препроцессора — это предоставление удобных синтаксических конструкций для разработчика, чтобы упростить, и тем самым, ускорить разработку и поддержу стилей в проектах.

CSS препроцессоры преобразуют код, написанный с использованием препроцессорного языка, в чистый и валидный CSS-код.

При помощи препроцессоров вы можете писать код, который нацелен на:

• Читабельность для человека
• Структурированность и логичность
• Производительность

И это лишь малая часть того, что может дать вам препроцессор. Но не стоит забегать вперёд.

Синтаксический сахар

Перед тем, как перейти к дальнейшему рассмотрению CSS-препроцессоров, давайте обновим наш лексикон новым понятием — «синтаксический сахар».

Синтаксический сахар (от англ. syntactic sugar) — это дополнения синтаксиса языка программирования, которые не вносят каких-то существенных изменений или новых возможностей, но делают этот язык более читабельным для человека.

Синтаксический сахар вводит в язык альтернативные варианты записи заложенных в этот язык конструкций. Под альтернативными вариантами записи стоит понимать более короткие или удобные конструкции для человека, которые в конечном итоге будут преобразовываться препроцессором в исходный язык, без синтаксического сахара.

Если попытаться применить это понятие к CSS-препроцессорам, то оно, в общем случае, полностью описывает их суть. Ещё раз напомню, что основной задачей препроцессоров является упрощение и ускорение разработки, а как это ещё можно сделать, если не ввести альтернативные варианты записи?

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

Пора перейти к более конкретным примерам, а именно к самим CSS-препроцессорам. На момент написания книги можно выделить три популярных препроцессора:

• Sass (SCSS)
• Stylus

И несколько незначительных для нас игроков:

• Closure Stylesheets
• CSS Crush

О первой тройке мы поговорим отдельно немногим ниже, а вот о двух последних разговора вообще не будет, в виду их непопулярности. При желании, описания этих препроцессоров с лёгкостью можно найти в поисковике.

Какой смысл использования препроцессоров?

Как я уже отметил выше, основные плюсы — это читабельность кода, структурирование и повышение производительности.

Существуют также и другие причины того, чтобы начать использовать препроцессор уже сегодня. Я хочу заострить на этом внимание, так как разработчики раньше, да многие и сейчас, отнекиваются от использования препроцессоров, находя их сложными, непонятными и ненужными.

CSS — это сложно

Стандартный CSS — это сложно. Синтаксис без использования вложенности, которую предлагают CSS-препроцессоры, просто напросто сложен для зрительного восприятия. Кроме того, нужно помнить имя родителя при вложенности. Отсутствие нормальных переменных и «функций» делает CSS-код грязным и узконаправленным.

Доступная документация

Прошли те времена, когда документация от препроцессоров была доступна только людям «в теме». Сейчас любой желающий может в кратчайшие сроки освоить любой из препроцессоров, причём с минимальными затратами сил.

Простота использования

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

Для более продвинутых пользователей есть специальные сборщики проектов. Не думайте, что если вы используете программу для препроцессоров, а не сборщик проектов, то вы недостаточно круты. На самом деле, такие сборщики предлагают полный контроль и расширенные настройки, а не делают из вас джедая.

Структура и логичность кода

Самым популярным предлагаемым функционалом любого CSS-препроцессора является возможность вкладывать селекторы друг в друга. Я не буду сейчас приводить пример, так как о возможностях Less, включая вложенность, будет написана соответствующая часть книги. На этом этапе вам стоит знать лишь то, что при использовании препроцессоров, можно вкладывать один селектор в другой, а другой в третий, получая что-то, похожее на оглавление книги:

1. Родительский селектор 1.1. Вложенный селектор 1.2. Вложенный селектор 1.2.1. Вложенный селектор 1.3. Вложенный селектор

Конечно, в реальной жизни селекторы не могут начинаться с цифр, однако, для проведения параллели между вложенностью и оглавлением, думаю такое упущение здесь уместно.

Примеси

Если говорить совсем кратко, то, используя примеси (от англ. Mixins), можно сделать код переиспользуемым. Это помогает избежать вспомогательных классов в разметке или дублирования свойств от селектора к селектору.

Модульность

Еще одним бонусом, который прямо сейчас уговорил бы меня начать пользоваться CSS-препроцессором, будет возможность вкладывать файлы в файлы, то есть проще говоря, производить конкатенацию файлов в заданной последовательности. Да, это можно организовать и на чистом CSS, но вкупе с другими возможностями получается очень мощный инструмент.

При этом мы получаем возможность делиться модулями (библиотеками примесей), которые создали для своих нужд и посчитали полезными для других людей. Получается, что любой разработчик может загрузить вашу библиотеку и использовать её в своих целях, вызывая по мере необходимости написанные вами примеси.

Почему бы не подождать развития CSS?

Развитие CSS идёт очень маленькими и неуверенными шагами, так как W3C придерживается приоритета скорости срабатывания CSS (производительности). С одной стороны это правильно и очень важно, но с другой — это отсутствие удобства для разработчиков.

В пример поставлю одну из спецификаций CSS4, которую ввели под давлением разработчиков — селектор по родителю. Столь долгий путь от идеи до принятия решения был из-за того, что W3C считало такой селектор медленным и дальнейшее его использование на сайтах привело бы к диким тормозам. Конечно же, речь идёт о повсеместном применении этого селектора, а не о единичных случаях.

Так что не стоит ждать в ближайшее время революций и изменений, способных затмить функционал и возможности CSS-препроцессоров.

Разновидности препроцессоров

Разумеется, как и в любой другой области, всегда есть конкуренция, и на рынке препроцессоров сейчас три главных, враждующих между собой лагеря:

• Sass (SCSS)
• Stylus

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

Для полной картины, я хочу привести краткую справку по каждому препроцессору:

Less

Собственно, герой этой книги. Самый популярный на момент написания книги препроцессор. Основан в 2009 году Алексис Сельер (Alexis Sellier) и написан на JavaScript (изначально был написан на Ruby, но Алексис вовремя сделал правильный шаг). Имеет все базовые возможности препроцессоров и даже больше, но не имеет условных конструкций и циклов в привычном для нас понимании. Основным плюсом является его простота, практически стандартный для CSS синтаксис и возможность расширения функционала за счёт системы плагинов.

Sass (SCSS)

Самый мощный из CSS-препроцессоров. Имеет довольно большое сообщество разработчиков. Основан в 2007 году как модуль для HAML и написан на Ruby (есть порт на C++). Имеет куда больший ассортимент возможностей в сравнении с Less. Возможности самого препроцессора расширяются за счёт многофункциональной библиотеки Compass, которая позволяет выйти за рамки CSS и работать, например, со спрайтами в автоматическом режиме.

Имеет два синтаксиса:

• Sass (Syntactically Awesome Style Sheets) — упрощённый синтаксис CSS, который основан на идентации. Считается устаревшим.
• SCSS (Sassy CSS) — основан на стандартном для CSS синтаксисе.

Stylus

Самый молодой, но в тоже время самый перспективный CSS-препроцессор. Основан в 2010 году небезызвестной в наших кругах личностью TJ Holowaychuk. Говорят, это самый удобный и расширяемый препроцессор, а ещё он гибче Sass. Написан на JavaScript. Поддерживает уйму вариантов синтаксиса от подобного CSS до упрощённого (отсутствуют: , ; , {} и некоторые скобки).