Основы
Препроцессор – это некая программа, которая принимает на входе некий код, а в результате возвращает код, написанный на другом языке.
LESS – один из популярнейших препроцессоров для CSS, написанный на языке JavaScript. LESS очень хорош тем, что в него встроено множество различных функций, позволяющих работать с цветами (за что я его и люблю). Но не в этом суть. Все козыри этого чуда еще впереди.
Установка
Как-никак, а начнем мы с того, как правильно установить LESS. Для этого нам понадобится сам препроцессор LESS, браузер Mozilla и пару строчек кода в HTML.
Почему именно Mozilla. Все дело в том, что LESS работает на сервере. Можно было бы установить сначала локальный сервер, а потом испытывать LESS. Но установка локального сервера – сложный процесс. А Mozilla – это единственный браузер, который поддерживает LESS даже без локального сервера.
Библиотеку LESS можно скачать с официального источника. Скачать Mozilla можно здесь. Теперь разберемся с кодом.
В секции head надо прописать две строчки:
Ну что, поехали!
Переменные в LESS
Опытные front-end разработчики наверняка задумывались о том, чтобы одно и то же значение (цвета, например) можно было бы куда-то сохранить, а потом использовать его в других свойствах (цвет текста, цвет фона, цвет градиента в фоне, длину, ширину и т.д.). Обычный CSS не позволяет реализовать такое. Однако мы говорим о LESS, а в нем включена замечательня вещь – поддержка переменных.
Переменная – это ячейка памяти в компьютере, где хранится та или иная информация. В эту ячейку памяти можно впихнуть все, что угодно: и значение цвета, и ширину элемента, высоту и т.д. Чтобы объявить переменную, нужно сначала написать значок собаки (@), затем сразу же после нее – имя переменной. После имени поставить двоеточие, а после двоеточия – значение переменной. Например, чтобы в переменную mainColor записать цвет #9af133, нужно прописать следующий код:
А затем объявленную переменную можно использовать в свойствах элемента. Например,
В CSS это выглядело бы вот так:
Переменные хороши тем, когда в стилях мы должны разным свойствам присвоить одно и то же значение. Посмотришь на макет страницы – и вспомнишь, что это – основной цвет страницы, именно его надо применить. Ведь согласитесь, легче запомнить слово, чем шестнадцатеричный код.
А в переменную, как мы сказали, можно записать не только цвета:
Подсчеты в LESS
Второе полезное свойство LESS – уметь считать. Если в CSS приходилось давать точные значения, то в LESS можно задать и вовсе целое выражение. Например, переменная mainWidth примет значение, равное 139 пикселям:
А можно складывать еще и «муху со слоном»!
Вы не поверите, но так же можно складывать и цвета!
Однако LESS не только умеет складывать, но и выполнять, помимо сложения, другие арифметические действия:
Миксины в LESS
Третье полезное свойство LESS – присутствие миксинов.
Миксин – набор правил, написанный для какого-то элемента. Эти наборы правил можно применять к блокам в CSS. Каким же образом? Перед тем, как это разобрать, давайте посмотрим, как вообще создать миксин. Синтаксис таков: ставится точка, сразу же после точки – наименование миксина, затем фигурные скобки, а в фигурных скобках пишутся свойства (тень, высота строки, ширина, фон и т.д.)
Например, чтобы создать миксин myMixin, который бы имел тень со смещением 2px вверх, цветом #222 шириной 20px, мы бы прописали:
А потом этот миксин можно применить к элементам на странице:
Скомпилировав этот код в CSS, мы получим такую запись:
Полезное свойство, не правда ли? Однако, это еще не все.
В миксинах можно объявить параметры. Они служат переменными в обычном CSS. Чтобы добавить параметры к миксинам, необходимо после имени добавить круглые скобки, а внутри этих скобок прописать наименования переменных. Это выглядит следующим образом:
А потом применим полученную запись к классу box:
Это скомпилируется в следующий CSS-код:
Получается, что в миксинах вместо этих параметров подставляются значения, указанные в круглых скобках. Здорово, не правда ли?
DRY с LESS
И последнее. Вы когда-нибудь слышали про принцип DRY (Don’t Repeat Yet) в программировании? Он заключается в том, что один и тот же код не должен повторяться. Такой принцип позволяет сократить записи в несколько раз. К счастью для нас, LESS следует по пути DRY.
Верстальщики, даже не заметно для себя, могут повторить тот или иной селектор, что противоречит правилу DRY. Страницы из-за этого грузятся медленнее, а трафик пользователя бывает не безграничным (особенно, если говорить о мобильных устройствах). В этом случае к нам на помощь приходит LESS. Чтобы прописать правило для блока, который находится внутри другого, следует одно правило вложить в другое. Как это выглядит?
Например, мы хотим обратиться к параграфу, который находится внутри div. В LESS мы должны прописать следующее:
Если скомпилировать это все в код CSS, то получится следующее:
Такой подход в LESS снижает шансы допустить повтор селекторов при написании правил.
А что, если мы хотим, например, для этого же блока написать правило, в котором будет принимать участие псевдокласс, или псевдоэлемент? Для этого мы воспользуемся, так называемым, родительским селектором &. Что это значит? Поясним на примере.
Вот, у нас есть ссылка. И мы хотим, чтобы ее подчеркивание исчезло, а цвет стал #9af133. Пропишем:
Знак амперсанда (&) как раз-таки и указывает на родительский селектор, почему он так и называется.
Резюме
Сегодня мы рассмотрели все основные действия, которые можно совершить с помощью LESS. Не сложно догадаться, что основной задачей использования данного препроцессора является повыешние оперативности при написании кода и возможность гибко работать с повторениями одних и тех же правил/свойств. Последнее актуально для больших проектов.
Попробуйте использовать LESS в своем следующем проекте и поделитесь впечатлениями!