Основы
Препроцессор – это некая программа, которая принимает на входе некий код, а в результате возвращает код, написанный на другом языке.
LESS – один из популярнейших препроцессоров для CSS, написанный на языке JavaScript. LESS очень хорош тем, что в него встроено множество различных функций, позволяющих работать с цветами (за что я его и люблю). Но не в этом суть. Все козыри этого чуда еще впереди.
Установка
Как-никак, а начнем мы с того, как правильно установить LESS. Для этого нам понадобится сам препроцессор LESS, браузер Mozilla и пару строчек кода в HTML.
Почему именно Mozilla. Все дело в том, что LESS работает на сервере. Можно было бы установить сначала локальный сервер, а потом испытывать LESS. Но установка локального сервера – сложный процесс. А Mozilla – это единственный браузер, который поддерживает LESS даже без локального сервера.
Библиотеку LESS можно скачать с официального источника. Скачать Mozilla можно здесь. Теперь разберемся с кодом.
В секции head надо прописать две строчки:
<link type=”text/css” rel=”stylesheet/less” href=”Путь к файлу *.less”>
<script src=”Путь к библиотеке less”></script>
Ну что, поехали!
Переменные в LESS
Опытные front-end разработчики наверняка задумывались о том, чтобы одно и то же значение (цвета, например) можно было бы куда-то сохранить, а потом использовать его в других свойствах (цвет текста, цвет фона, цвет градиента в фоне, длину, ширину и т.д.). Обычный CSS не позволяет реализовать такое. Однако мы говорим о LESS, а в нем включена замечательня вещь – поддержка переменных.
Переменная – это ячейка памяти в компьютере, где хранится та или иная информация. В эту ячейку памяти можно впихнуть все, что угодно: и значение цвета, и ширину элемента, высоту и т.д. Чтобы объявить переменную, нужно сначала написать значок собаки (@), затем сразу же после нее – имя переменной. После имени поставить двоеточие, а после двоеточия – значение переменной. Например, чтобы в переменную mainColor записать цвет #9af133, нужно прописать следующий код:
@mainColor: #9af133;
А затем объявленную переменную можно использовать в свойствах элемента. Например,
body {
background-color: @mainColor;
}
В CSS это выглядело бы вот так:
body {
background-color: #9af133;
}
Переменные хороши тем, когда в стилях мы должны разным свойствам присвоить одно и то же значение. Посмотришь на макет страницы – и вспомнишь, что это – основной цвет страницы, именно его надо применить. Ведь согласитесь, легче запомнить слово, чем шестнадцатеричный код.
А в переменную, как мы сказали, можно записать не только цвета:
@mainColor: #9af133;
@mainWidth: 139px;
@borderWidth: 3%;
Подсчеты в LESS
Второе полезное свойство LESS – уметь считать. Если в CSS приходилось давать точные значения, то в LESS можно задать и вовсе целое выражение. Например, переменная mainWidth примет значение, равное 139 пикселям:
@mainWidth: 61px + 78px;
А можно складывать еще и «муху со слоном»!
@mainWidth: 34px + 75%;
Вы не поверите, но так же можно складывать и цвета!
@mainColor: #00f + #0f0;
Однако LESS не только умеет складывать, но и выполнять, помимо сложения, другие арифметические действия:
@borderWidth: 155px – 151px; /* 4px */
@mainColor: #f190ff - #caa114; /*#26efeb */
@mainWidth: 15px*3; /*45px*/
@secondWidth: 162px / 3; /*54px*/
Миксины в LESS
Третье полезное свойство LESS – присутствие миксинов.
Миксин – набор правил, написанный для какого-то элемента. Эти наборы правил можно применять к блокам в CSS. Каким же образом? Перед тем, как это разобрать, давайте посмотрим, как вообще создать миксин. Синтаксис таков: ставится точка, сразу же после точки – наименование миксина, затем фигурные скобки, а в фигурных скобках пишутся свойства (тень, высота строки, ширина, фон и т.д.)
Например, чтобы создать миксин myMixin, который бы имел тень со смещением 2px вверх, цветом #222 шириной 20px, мы бы прописали:
.myMixin {
box-shadow: 0 -2px 0 0 #222;
width: 20px;
}
А потом этот миксин можно применить к элементам на странице:
.box {
.myMixin;
}
Скомпилировав этот код в CSS, мы получим такую запись:
.box {
box-shadow: 0 -2px 0 0 #222;
width: 20px;
}
Полезное свойство, не правда ли? Однако, это еще не все.
В миксинах можно объявить параметры. Они служат переменными в обычном CSS. Чтобы добавить параметры к миксинам, необходимо после имени добавить круглые скобки, а внутри этих скобок прописать наименования переменных. Это выглядит следующим образом:
.myMixin(@borderWidth, @backgroundColor){
border: @borderWidth solid #333;
background-color: @backgroundColor;
}
А потом применим полученную запись к классу box:
.box {
.myMixin(2px, #9af133);
}
Это скомпилируется в следующий CSS-код:
.box {
border: 2px solid #333;
backround-color: #9af133;
}
Получается, что в миксинах вместо этих параметров подставляются значения, указанные в круглых скобках. Здорово, не правда ли?
DRY с LESS
И последнее. Вы когда-нибудь слышали про принцип DRY (Don’t Repeat Yet) в программировании? Он заключается в том, что один и тот же код не должен повторяться. Такой принцип позволяет сократить записи в несколько раз. К счастью для нас, LESS следует по пути DRY.
Верстальщики, даже не заметно для себя, могут повторить тот или иной селектор, что противоречит правилу DRY. Страницы из-за этого грузятся медленнее, а трафик пользователя бывает не безграничным (особенно, если говорить о мобильных устройствах). В этом случае к нам на помощь приходит LESS. Чтобы прописать правило для блока, который находится внутри другого, следует одно правило вложить в другое. Как это выглядит?
Например, мы хотим обратиться к параграфу, который находится внутри div. В LESS мы должны прописать следующее:
div {
/* … Правила для div */
p {
/* … Правила для div p */
}
}
Если скомпилировать это все в код CSS, то получится следующее:
div {
/* … Правила для div */
}
div p {
/* … Правила для div p */
}
Такой подход в LESS снижает шансы допустить повтор селекторов при написании правил.
А что, если мы хотим, например, для этого же блока написать правило, в котором будет принимать участие псевдокласс, или псевдоэлемент? Для этого мы воспользуемся, так называемым, родительским селектором &. Что это значит? Поясним на примере.
Вот, у нас есть ссылка. И мы хотим, чтобы ее подчеркивание исчезло, а цвет стал #9af133. Пропишем:
a {
&:hover {
text-decoration: none;
color: #9af133;
/* & = a, так как псевдокласс находится внутри селектора a */
}
}
Знак амперсанда (&) как раз-таки и указывает на родительский селектор, почему он так и называется.
Резюме
Сегодня мы рассмотрели все основные действия, которые можно совершить с помощью LESS. Не сложно догадаться, что основной задачей использования данного препроцессора является повыешние оперативности при написании кода и возможность гибко работать с повторениями одних и тех же правил/свойств. Последнее актуально для больших проектов.
Попробуйте использовать LESS в своем следующем проекте и поделитесь впечатлениями!