Программируемый язык стилей LESS

LESS (Leaner Style Sheets, компактная таблица стилей) — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в свою очередь, оказал влияние на его новый синтаксис «SCSS», в котором также использован синтаксис, являющийся расширением СSS.

LESS — это продукт с открытым исходным кодом. Его первая версия была написана на Ruby, однако в последующих версиях было решено отказаться от использования этого языка программирования в пользу JavaScript.

Less — это вложенный метаязык: валидный CSS будет валидной less-программой с аналогичной семантикой.

LESS – это скрипт, который может использоваться как на стороне клиента (CSS-таблица рассчитывается в браузере пользователя), так и на стороне сервера. Однако существуют более удачные способы использовать LESS – например, предварительная компиляция таблицы.

В таком случае можно получить стандартную таблицу стилей, которая будет правильно использоваться браузером и не требовать постоянно конвертировать ее заново.

Подключение LESS

Первый вариант подключения LESS предусматривает использование файлов *.less напрямую в браузере пользователя с подключением необходимого скрипта JavaScript для компиляции на «лету».

По аналогии с каскадными таблицами стилей необходимо подключить файл *.less к HTML документу с использованием тега <link>:

<link rel="stylesheet/less" href="styles.less" />

После этого необходимо скачать файл со скриптом, или, как вариант, получить ссылку на сеть доставки контента (CDN) на официальном сайте метаязыка LESS.

Файлы со скриптами нужно добавлять после того как подключили файл *.less. Этого достаточно, чтобы начать описывать стили с помощью метаязыка LESS, при этом компиляция из LESS в CSS будет происходить на стороне браузера (на «лету»).

Второй вариант предусматривает использование специального препроцессора, который будет компилировать файлы *.less в файлы каскадных таблиц стилей — *.css.

Переменные

Переменные в LESS работают точно так же, как и в других языках программирования. Программист создаёт переменную, присваивает ей значение, а дальше можете использовать ее в любом правиле CSS. Например:

@serif-font: Georgia;
h1, h2, h3, h4 {font-family: @serif-font;}
.large-text {font-family: @serif-font;}

В данном случае переменная @serif-font хранит в себе название шрифта. Если нужно поменять шрифт Georgia на Times New Roman, то достаточно сменить значение переменной и значение шрифта изменится во всем документе.

У переменных есть области видимости. Внутри каждого правила можно переназначать значение переменной для этого правила. В следующем примере цвет ссылки будет белый, а цвет фона кнопки – серый:

@color: #сссссс;
a { @color: #ffffff; color:@color;}
button { background: @color;}

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

Операции

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

.button{
    @unit: 3px;
    border:@unit solid #ddd;
    padding: @unit * 3;
    margin: @unit * 2;
}

Переменная @unit получает значение 3px. Оно подставляется в значение ширины границы. Отступы соответственно получаются умножением этого значения на 3 или 2.

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

button {
    background: #941f1f + #222222;
    border: #941f1f - #111111;
}

Вышеприведённая операция с фоном увеличит каждое значение HEX на 2. Результатом будет #B64141 — более светлый вариант оригинального цвета.

Операция с рамкой уменьшит каждое значение HEX на 1 и выдаст более темный цвет: #830E0E.

Вложенность

LESS позволяет вкладывать стили друг в друга, тем самым упрощая написание кода:

a { color:red; }
p { margin:0px; }
article {
    a { color: green; }
    p { color: #555;
        a { color:blue; }
    }
}

Отступы необязательны, но они улучшают читабельность кода. Уровни вложенности не ограничены.

Примешивания

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

.tab {
    -webkit-border-top-left-radius: 7px;
    -webkit-border-top-right-radius: 7px;
    -moz-border-radius-topleft: 7px;
    -moz-border-radius-topright: 7px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

Этот код нужно переписывать каждый раз, когда необходимо сделать такое закругление.

Это можно упростить с помощью LESS. Для этого нужно создать примешивание. Пример:

.rounded-top {
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.top {
    background: #333;
    color:#fff;
    .rounded-top;
]
.submit {
    .top;
}

В данном случае мы создали и определили класс rounded-top, а затем импортировали все его правила в класс top. А все стили класса top импортированы в класс submit, в том числе и правила для фона и цвета текста.

Комментарии в LESS

По аналогии с CSS допускается использовать внутри *.less файла как однострочные, так и многострочные комментарии со следующим синтаксисом:

// это однострочный комментарий

/* это
многострочный
комментарий */

/* это многострочный комментарий в одной строке */

Комментарии могут не сохраняться при компиляции из файлов *.less в *.css.