Как перестать бояться и перейти на LESS

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

2014.02.20

Более 35 000 клиентов