Обучайся бесплатно с WAYUP Premiere сегодня вечером

Основы

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

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 в своем следующем проекте и поделитесь впечатлениями!

Как вам материал?