LESS - динамический язык стилей, расширение CSS. Написан на JavaScript, поддерживает семантику CSS.
В данной статье мы не будем убеждать вас в необходимости массового перехода на LESS или описывать его преимущества перед прочими CSS-препроцессорами вроде SASS или Stylus, мы просто разберем “почему” и “как”. Статья предназначена для тех, кто только собирается осваивать LESS, и написана максимально простым языком.
Почему?
Так почему же стоит использовать LESS в разработке? Улучшенный синтаксис, простой код, использование переменных и операций, примешивание классов и прочие “плюшки”. Это сэкономит вам время разработки и внесения изменений и улучшит читаемость. В этом разделе мы рассмотрим примеры практического использования возможностей LESS.
Переменные
Тут всё просто - мы можем записать значение или строку в переменную, которую потом можно использовать в любом месте документа. Полезно для “глобальных стилей” вроде основного цвета текста, типа шрифта, цвета фона, подложки и т.п.
Простой пример:
@fontFamily: Arial, sans-serif;
@fontSize: 12px;
@bgColor: #444;
body {
font-family: @fontFamily;
font-size: @fontSize;
background: @bgColor;
color: @color;
}
textarea {
font-family: @fontFamily;
color: @color;
}
Также можно объявить переменную внутри класса, в этом случае ее можно использовать только внутри этого класса.
.example {
@whiteBorder: 1px solid #FFF;
border-top: @whiteBorder;
border-bottom: @whiteBorder;
}
Вложенные правила
В CSS для указания наследования нужно было писать длинные строки, дублировать их для события hover.
Например:
.example {
background: #FFF;
border: none;
}
.example .list {
position: relative;
}
.example .list div {
display: inline-block;
}
.example .list div a.exampleLink {
color: #FFF;
}
.example .list div a.exampleLink:hover {
text-decoration: none;
}
.example .list div a.exampleLink:active {
color: #444;
}
В LESS это решается вложенностью, просто указанием одного класса внутри другого.
.example {
background: #FFF;
border: none;
.list {
position: relative;
div {
display: inline-block;
.exampleLink {
color: #FFF;
&:hover {
text-decoration: none;
}
&:active {
color: #444;
}
}
}
}
}
Если мы указываем следующий селектор через амперсанд (&), это значит, что мы описываем стили для классов или псевдоклассов принадлежащих родительскому элементу.
Примешивания (mixins)
С помощью примешиваний можно включить все стили класса в другой класс, указав название примешиваемого класса как одно из свойств. Также можно передавать в этот класс аргументы (вроде функций в программировании), что позволит нам использовать один шаблон по-разному. Очень полезно для кроссбраузерных свойств CSS3. Рассмотрим примеси на “живом примере”. Есть задача описать стили для кнопок действий в нашем приложении, они должны быть разных цветов, с градиентом, тенями и скруглением углов.
Для начала создадим классы-mixins для свойств CSS3.
.borderRadius (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.boxShadow (@x: 0, @y: 0, @blur: 1px, @color: #444) {
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
-o-box-shadow: @arguments;
box-shadow: @arguments;
}
.gradient (@colorStart, @colorEnd) {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, @colorStart), color-stop(1, @colorEnd));
background: -moz-linear-gradient(center top, @colorStart 5%, @colorEnd 100%);
background: -webkit-linear-gradient(center top, @colorStart 5%, @colorEnd 100%);
background: -o-linear-gradient(center top, @colorStart 5%, @colorEnd 100%);
background: -ms-linear-gradient(top, @colorStart 5%, @colorEnd 100%);
background: linear-gradient(center top, @colorStart 5%, @colorEnd 100%);
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='(@colorStart)', endColorstr='(@colorEnd)')";
background-color: @colorStart;
}
В класс “borderRadius” мы можем впоследствии передать любое значение, если же мы просто укажем класс, но не будем ничего передавать, то значение будет равно 5px.
В классе “boxShadow” мы можем использовать переменную @arguments, она записывает все свойства класса в строку. Таким образом, запись
-webkit-box-shadow: @arguments;
в нашем случае, была бы равносильна
-webkit-box-shadow: @x @y @blur @color;
В классе “gradient”, кроме всего прочего, мы указываем свойство “filter” для старых IE, обратите внимание, что для подобных свойств мы передаем значение как строку (~”......”), иначе LESS при компиляции выдаст нам ошибку.
Далее опишем класс “button”, который в дальнейшем будем использовать для создания кнопок.
.button (@buttonColorStart, @buttonColorEnd, @buttonColor: #fff) {
.borderRadius;
.boxShadow(0,0,7px,#DDD)
.gradient(@buttonColorStart,@buttonColorEnd);
text-shadow: 1px 1px 1px #777;
color: @buttonColor;
text-decoration: none;
border: 1px solid #e5e5e5;
padding: 8px 0;
cursor: pointer;
&:active {
.gradient(@buttonColorEnd,@buttonColorStart);
}
&:hover {
.boxShadow(0,0,7px,#999);
}
}
В этот класс мы будем передавать цвета для градиента и цвет текста кнопки. Мы сразу примешиваем классы “borderRadius” (ничего не передаем, оставляем по умолчанию 5px), “boxShadow” (передаем аргументы, отличные от прописанных по-умолчанию) и “gradient” (передаем цвет фона). Также описываем стили для псевдоэлементов :hover и :active
Теперь осталось только создать и описать классы, которые мы будем давать элементам-кнопкам.
.blueButton {
.button(#9fc2d2,#769cad,#FFF);
}
.greenButton {
.button(#2ecc71,#27ae60,#FFF);
}
.redButton {
.button(#e74c3c,#c0392b,#FFF);
}
.yellowButton {
.button(#f1c40f,#f39c12,#FFF);
}
Готово :)
Функции и операции
Не очень часто используемый в повседневной жизни, однако достаточно полезный раздел.
Мы можем оперировать значениями или переменными: складывая их, вычитая или умножая. В каких случаях это может пригодиться? Например, при использовании левого фиксированного меню.
@leftMenuWidth: 100px;
.leftMenu {
width: @leftMenuWidth;
height: 100%;
position: fixed;
}
.content {
margin-left: @leftMenuWidth + 20;
}
Таким образом, отступ у блока с классом “content” будет равен “ширина меню + 20px”.
Более популярный пример это операции с цветом. В некоторых случаях может понадобится сделать цвет фона или текста темнее или светлее (например, при наведении). Этого можно добиться путем сложения или вычитания цветов:
@exampleColor: #9b59b6;
.example {
// увеличиваем значение HEX на 1
// получаем более светлый оттенок
color: @exampleColor + #111;
&:hover {
// уменьшаем значение HEX на 1
// получаем более темный оттенок
color: @exampleColor - #111;
}
}
Или с использованием встроенных в LESS функций:
@exampleColor: #9b59b6;
.example {
// осветляем цвет на 10%
color: lighten(@exampleColor, 10%);
&:hover {
// затемняем цвет на 10%
color: darken(@exampleColor, 20%);
}
}
Есть также функции saturate, desaturate, spin и др. В этой статье мы не будем освещать их все, наше дело - донести суть :) Со списком функций и способами применения вы можете ознакомиться на оффициальном сайте.
Как?
Файл со стилями можно подключить в документ несколькими способами.
На стороне клиента:
- Скачиваем последнюю версию less.js
- Подключаем таблицу стилей .less при помощи указания rel со значением “stylesheet/less”
- Подключаем less.js
- Важно! Подключаем файл со стилями ДО подключения скрипта
На стороне сервера:
- Скачайте и установите Node.js и менеджер пакетов npm
- На нашем сайте вы можете найти статью о том, как установить Node.js на VDS с Debian Wheezy
-
Установите пакет less с помощью npm
$ npm install less -
Скомпилировать файл CSS
$ lessc styles.less -
Cкомпилированный CSS будет выведен в stdout, и его можно будет перенаправить в файл с именем по вашему выбору
$ lessc styles.less > styles.css
Предварительная компиляция
Используя онлайн-сервисы или десктопные программы-компиляторы, можно заранее скомпилировать файл CSS, который в дальнейшем подключить в документ.
Следует заметить, что при разработке небольших сайтов с файлом стилей размером до 1000 строк,
вполне можно (но вряд ли нужно) пользоваться js-библиотекой и компилировать LESS на стороне клиента (каждый раз при загрузке страницы),
процесс достаточно недолгий. В идеале - использовать Node.js.
Советы и личные наблюдения
-
Не злоупотребляйте вложенностью, 3-4 уровня вполне достаточно, используйте уникальные классы или id-селекторы, разбивайте большие блоки стилей.
-
Стили для объекта по селектору “id” следует писать вне вложенных правил, это сокращает количество строк.
-
Не указывайте селекторы через запятую, используйте вложенные правила, это сокращает количество строк.
-
Уделяйте внимание структуре файла стилей. Комментируйте код (обратите внимание, что комментарии, начинающие с “//”, будут удалены при компиляции, тогда как “/ /” такие комментарии будут перенесены в CSS-файл). Разделите структуру на несколько частей (например: глобальные переменные, классы-mixin с кроссбраузерными стилями CSS3, cтили для основных тегов и все остальные).
-
В описании конкретного класса группируйте классы-mixin и стандартные CSS-правила - улучшает читаемость. Редактировать такой код будет легко и приятно.
-
Переменные и классы-mixin не отображаются в результирующем файле. Если вы описываете два или более классов с почти одинаковыми стилями, вынесите повторяющиеся правила в класс-mixin, впоследствии их будет легче править.
Итог
Если вы стремитесь к тому чтобы “делать все быстрее, выше, сильнее”, вам уже стоит задуматься об использовании CSS-препроцессоров. LESS подойдет как тем, кто занимается созданием небольших сайтов, так и тем, кто разрабатывает крупное серверное приложение. К слову стили нового дизайна нашей панели управления хостингом полностью описаны на LESS.
Приемы и структуру LESS вы так же можете изучить на примере фреймворка Twitter Bootstrap.
Интересный факт - начав использовать LESS, вам будет трудно вернуться к обычному CSS :)
Полезные ресурсы:
Оффициальный сайт LESS
Русскоязычный сайт LESS
Страница LESS на GitHub
Winless компилятор LESS - CSS
LESS.app компилятор LESS - CSS
Node.js
