Препроцессор LESS. Как установить и использовать

14 февраля 2020 CSS

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

Начало работы

Для того, чтобы ваш проект стал поддерживать LESS, необходимо скачать сам препроцессор, например отсюда. И подключить ваш файл со стилями, как обычный CSS, но только указав rel="stylesheet/less":

Переменные

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

Зададим переменную color со значением цвета, и применим её к ссылкам и кнопкам:

@color: #da4453;
a {
    color:@color;
}
button {
    background: @color;
}

Встроенные функции

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

Прибавим к margin 5px:

@margin: 10px;
h1 {
    margin: @margin;
}
h2 {
    margin: (@margin + 5);
}

@color: #da4453;
@color2: #fff;

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

mix(@color, @color2);    // смешение цветов @color1 и @color2

Условные операторы

В LESS они называются примеси.

.mixin(@value) when (@value > 0), (@value =< 100) {
  color: #da4453;
}