Skip to main content

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

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

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

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

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

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

Переменные

В 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;
}
Похожие записи
Как использовать animate.css

Посмотрим правде в глаза, новые функции CSS3, которые впервые привлекли наше внимание, были анимации и... Читать далее

Как использовать фильтры CSS

Фильтры CSS - это мощный инструмент, который позволяет нам создавать удивительные визуальные эффекты с нашими... Читать далее

Как сделать прогресс бар на CSS

Прогресс бар начал использоваться в интернете с тех пор, как мы поняли, что не все... Читать далее

Прижать футер с помощью Flexbox

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

CSS animation

Свойство animation в CSS можно использовать для анимации многих других свойств CSS, таких как цвет,... Читать далее

CSS transition

CSS transition - это свойство, с помощью которого можно сделать плавные эффекты перехода элемента из... Читать далее

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

Добавить комментарий

*

code