Главная > Статьи > Web-разработка >

Введение в LESS

24.04.2016

CSS — простой и доступный инструмент. Однако, он имеет свои ограничения, особенно когда встает вопрос о сопровождении готового кода. Когда нужно модифицировать тысячи строк со стилями, разделенных по нескольким файлам, задача становится проблемой. Для преодоления проблемы созданы препроцессоры CSS, которые позволяют комбинировать стили динамически. Существует несколько вариантов (например, LESS и SASS), сегодня мы рассмотрим LESS.

Использование LESS

Использовать LESS очень просто. Нужно просто добавить две строки в тег head вашего документа HTML. Первая строка содержит название вашего файла LESS, а вторая строка — подключение библиотеки less.js, которую можно скачать с официального сайта.

<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="less.js" type="text/javascript"></script>

Теперь LESS файл будет работать также как и обычный CSS.

Этот метод работает только в современных браузерах и подходит для использования на локальном сервере. Для рабочего сайта необходима предварительная компиляция на веб-сервере или различные инструменты от сторонних производителей.

Синтаксис LESS

В отличие от обычного CSS, LESS больше похож на язык программирования. Он динамический, поэтому логичного ожидать использования в нем переменных, операций и области видимости.

Переменные

При работе с CSS вы вероятно часто сталкивались с ситуацией, когда повторяющееся значение устанавливалось в нескольких блоках по всей таблице стилей.

.class1 {
    background-color: #2d5e8b;
}
.class2 {
    background-color: #fff;
    color: #2d5e8b;
}
.class3 {
    border: 1px solid #2d5e8b;
}

Все прекрасно, пока не придется просеивать 1000 одинаковых участков кода по всей таблице стилей, чтобы поменять значение. При использовании препроцессора LESS такая проблема легко решается с помощью переменных. Переменные позволяют хранить значения, которые можно многократно использовать в таблице стилей.

@color-base: #2d5e8b;

.class1 {
    background-color: @color-base;
}
.class2 {
    background-color: #fff;
    color: @color-base;
}
.class3 {
    border: 1px solid @color-base;
}

В выше приведенном примере в переменной @color-base сохраняется значение #2d5e8b. И когда потребуется изменить цвет, то нужно будет поменять значение только в переменной.

В переменной можно использовать и другие значения:

@font-family: Georgia;
@dot-border: dotted;
@transition: linear;
@opacity: 0.5;

Вложенные правила (nesting)

При работе с обычным CSS кодом, достаточно часто встречается следующая структура кода:

nav {
    height: 40px;
    width: 100%;
    background: #455868;
    border-bottom: 2px solid #283744;
}
nav li {
    width: 600px;
    height: 40px;
}
nav li a {
    color: #fff;
    line-height: 40px;
    text-shadow: 1px 1px 0px #283744;
}

В обычном CSS коде мы выбираем наследников, указывая родителя в каждом наборе правил. В LESS можно улучшить выше приведенный набор правил с помощью вложения наследников в родительский элемент:

nav {
    height: 40px;
    width: 100%;
    background: #455868;
    border-bottom: 2px solid #283744;
    li {
        width: 600px;
        height: 40px;
        a {
            color: #fff;
            line-height: 40px;
            text-shadow: 1px 1px 0px #283744;
        }
    }
}

Также можно использовать псевдо-классы, например :hover, с помощью символа амперсенда &. Допустим, мы хотим добавить :hover к тегу ссылки:

a {
    color: #fff;
    line-height: 40px;
    text-shadow: 1px 1px 0px #283744;
    &:hover {
        background-color: #000;
        color: #fff;
    }
}

Примеси (mixins)

В LESS можно использовать примеси для хранения набора правил и применения их в других наборах. Например:

.gradient {
    background: #eaeaea;
    background: linear-gradient(top, #eaeaea, #cccccc);
}

В выше приведенном примере мы устанавливаем цвет градиента в классе .gradient. Затем, когда нужно добавить градиент, нужно просто вставить .gradient следующим образом:

.box {
    .gradient;
    border: 1px solid #555;
    border-radius: 3px;
}

Класс .box наследует все объявления из .gradient. Поэтому выше приведенное выражение LESS эквивалентно следующему обычному коду CSS:

.box {
    background: #eaeaea;
    background: linear-gradient(top, #eaeaea, #cccccc);
    border: 1px solid #555;
    border-radius: 3px;
}

Примеси с параметрами

Примеси с параметрами почти такие же, как и обычные, но сродни функциям они могут принимать параметры для использования внутри примеси:

.border-radius(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

.sidebar {
    .border-radius(4px);
}

Результат выглядит следующим образом:

.sidebar {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

Мы также можем выставить значения по умолчанию для параметров:

.border-radius(@radius: 6px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}
.sidebar1 {
    .border-radius;
}
.sidebar2 {
    .border-radius(12px);
}

Что в результате дает:

.sidebar1 {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.sidebar2 {
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
}

При работе с CSS3 можно использовать библиотеку LESS ELements, чтобы облегчить свою работу. LESS Elements является коллекцией общих примешиваний CSS3, которые часто используются в стилях, например, border-radius, gradients, drop-shadow и так далее.

Чтобы использовать LESS нужно просто добавить правило @import файл LESS. Нужно только загрузить библиотеку и поместить ее в рабочую директорию.

@import "elements.less";

Теперь можно использовать все классы из elements.less. Например, чтобы добавить скругление углов рамки с радиусом 3px к элементу div, нужно написать:

div {
    .rounded(3px);
}

Операции

Также можно использовать операции в LESS. Доступны сложение, вычитание, умножение и деление.

Допустим, что элемент B в два раза выше элемента A:

@height: 100px

.element-A {
    height: @height;   
}
.element-B {
    height: @height * 2;
}

Сначала мы определяем переменную @height и назначаем ее для указания высоты элемента А. В элементе В мы просто умножаем значение переменной на 2. Теперь, когда мы изменяем значение переменной @height, элемент В всегда будет в два раза выше.

Операции с цветом

Операции, которые мы продемонстрировали выше, могут быть использованы для управления цветом. Цвета можно создавать и управлять ими посредством математики:

@color: #888888 - #333333;

h2 {
  color: @color;
}

И скомпилированный код выглядит следующим образом:

h2 {
  color: #555555;
}

Это еще не все, что LESS может делать с цветами. Все становится намного интереснее, когда речь заходит о встроенных функциях для работы с цветом:

lighten(@color, 10%);     // возвращает цвет, который на 10% светлее, чем @color
darken(@color, 10%);      // возвращает цвет, который на 10% темнее, чем @color

saturate(@color, 10%);    // возвращает цвет, который на 10% более насыщенный, чем @color
desaturate(@color, 10%);  // возвращает цвет, который на 10% менее насыщенный, чем @color

fadein(@color, 10%);      // возвращает цвет, который на 10% менее прозрачен, чем @color
fadeout(@color, 10%);     // возвращает цвет, который на 10% более прозрачен, чем @color
fade(@color, 50%);        // возвращает @color с 50%-ной прозрачностью

spin(@color, 10);         // возвращает цвет с оттенком в 10 раз большим, чем @color
spin(@color, -10);        // возвращает цвет с оттенком в 10 раз меньшим, чем @color

mix(@color1, @color2);    // возвращает микс цветов @color1 и @color2

Математические функции

С помощью этих функций вы можете использовать числа в своем коде. Среди этих функций можно выделить round(), ceil(), floor() и percentage(). Передавая числа в эти функции, вы сможете получить округленные числа, числа, округленные по большему и по меньшему значению, а также числа в процентном выражении.

Область видимости (scope)

LESS использует концепцию области видимости. Сначала используются переменные из локального контекста, а если их нет, то происходит поиск в более широкой области видимости.

header {
    @color: black;
    background-color: @color;
    nav {
        @color: blue;
        background-color: @color;
        a {
            color: @color;
        }
    }  
}

В приведенном примере header имеет переменную для цвета со значением black, но фон элемента nav будет иметь цвет blue, так как переменная @color находится в локальном контексте.