«LESS»

динамический язык стилевой разметки


Юрий Матюхин
Декабрь, 2012

Основные темы:

Что такое LESS

LESS – это надстройка над CSS, которая расширяет CSS динамическими возможностями, такими как переменные, примешивания, операции и функции.

Любой CSS код – это валидный LESS, но дополнительные элементы LESS не будут работать в простом CSS. Следовательно существующий CSS уже является работоспособным LESS кодом, что уменьшает порог вхождения в новую технологию.

Как использовать LESS

Есть два способа использования LESS. Вы можете создать LESS файл и конвертировать его при помощи Javascript на лету или скомпилировать его заранее и использовать получившийся CSS файл.

Используем LESS и Javascript файл (1 способ):

Нужно скачать с сайта lesscss.org Javascript файл и подключить его к странице:

<script type='text/javascript' src='less.js'>

Затем создадим файл с расширением .less и подключим его:

<link type='text/css' rel='stylesheet/less' href='style.less'></link>

Удостоверьтесь, что вы прикрепили LESS файл перед Javascript.

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

Как использовать LESS

Компилируем LESS файл (2 способ):

Хотя этот способ немного утомительней, но иногда он является более предпочтительным. Чтобы не конвертировать код при каждой загрузке страницы можно использовать результирующий CSS файл.

Конвертеры: для Windows – Winless и LESS.app для Mac.

Обе программы имеют интуитивно понятный интерфейс, поэтому расписывать как ими пользоваться подробнее не имеет смысла.

LESS может компилироваться на стороне сервера с Node.js и Rhino. Подробнее об этом можно будет прочитать на официальном сайте.

Синтаксис LESS — Переменные

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

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

В примере выше мы объявляем переменную @header-font и записываем туда значение «Georgia». Теперь мы можем использовать эту переменную всегда, когда мы хотим установить шрифт Georgia.

Синтаксис LESS — Примеси (mixins)

Примеси в 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;
}

.tab {
    background: #333;
    color:#fff;
    .rounded_top;
}
.submit {
    .rounded_top;
}

Мы определили элемент .rounded_top для округления верхних углов. Когда мы добавляем его к любому другому элементу как примесь мы импортируем правила, которые мы создали для него.

Синтаксис LESS — Примеси с параметром

Примеси с параметром - это обычные примеси, в которых можно указывать аргумент при вызове.

.rounded_top(@radius) {
    -webkit-border-top-left-radius: @radius;
    -webkit-border-top-right-radius: @radius;
    -moz-border-radius-topleft: @radius;
    -moz-border-radius-topright: @radius;
    border-top-left-radius: @radius;
    border-top-right-radius: @radius;
}
.tab {
    background: #333;
    color:#fff;
    .rounded_top(6px);
}
.submit {
    .rounded_top(3px);
}

Тут радиус у .tab равен 6px, а .submit получит значение 3px.

Синтаксис LESS — Вложенные правила

Во время написания CSS мы пользуемся каскадностью стилей. Чтобы изменить поля у параграфа только внутри статьи можно использовать следующий код:

article.post p{
    margin: 0 0 12px 0;
}

При таком подходе, если нам надо изменить стиль элемента только внутри статьи, нужно будет использовать префикс article.post для каждого элемента. Это делает написание кода более скучным и усложняет его чтение.

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

article.post {
    p{
        margin: 0 0 12px 0;
    }
}

Синтаксис LESS — Операции

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

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

Присваиваем переменной @unit значение 3px. Затем мы устанавливаем ширину рамки равную значению переменной @unit, отступы в три раза больше этой ширины, а поля – в два.

Синтаксис LESS — Операции управления цветом

В LESS можно использовать операции для смешивания цветов.

Если вы хотите изменить значение цвета, то можете сделать это вычитанием или добавлением другого цвета.

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

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

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

Синтаксис LESS — Функции работы с цветом

LESS предлагает множество функций, изменяющих указание цвета. Цвета сначала преобразуются в цветовую модель HSL (от англ. Hue, Saturation, Lightness — цветовая модель, в которой цветовыми координатами являются тон, насыщенность и светлота), а затем манипуляции ведутся с каждым каналом по отдельности:

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

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

fadein(@color, 10%);      // возвращает цвет, на 10% *менее* прозрачный
fadeout(@color, 10%);     // возвращает цвет, на 10% *более* прозрачный

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

Синтаксис LESS — Функции работы с цветом

Вы также можете извлекать информацию о цвете:

hue(@color);        // возвращает канал тона (`hue`) в указанном @color
saturation(@color); // возвращает канал насыщенности (`saturation`) в указанном @color
lightness(@color);  // возвращает канал светлоты (`lightness`) в указанном @color

Это полезно, если Вы хотите создать новый цвет, основываясь на значениях каналов другого цвета, например:

@new: hsl(hue(@old), 45%, 90%);

в результате @new получит тон (hue), равный тону цвета @old, но при этом будет иметь свои собственные насыщенность и светлоту.

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

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

round(1.67); // вернет `2`
ceil(2.4);   // вернет `3`
floor(2.6);  // вернет `2`

Если Вам нужно преобразовать значение в проценты, это можно сделать при помощи функции percentage:

percentage(0.5); // вернет `50%`

Синтаксис LESS — Комментарии

LESS придерживается привычного по CSS стиля комментариев:

/* Привет, я комментарий в стиле CSS! */
.class { color: black }

В LESS также возможны однострочные комментарии, они считаются невидимыми, и не появляются в итоговом, скомпилированный выводе CSS:

// Привет, я невидимый комментарий, я не появлюсь в выводе CSS
.class { color: white }

Синтаксис LESS — Импортирование

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

@import "lib.less";
@import "lib";

Если Вы хотите импортировать файл CSS, и не хотите, чтобы LESS обрабатывал его содержимое, просто используйте расширение .css:

@import "lib.css";

Директива будет оставлена как есть, и в этом же виде попадет в вывод CSS.

Синтаксис LESS — Экранирование

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

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

.class {
  filter: e("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png')");
}

Это будет выведено в виде:

.class {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png');
}

Дополнительная информация

В данной презентации рассмотрены основные возможности LESS, более подробное описание вы сможете найти по следующим ссылкам:



Ссылка на презентацию — http://ymatuhin.vbrk.ru/less.html

Спасибо за внимание!


Юрий Матюхин
Декабрь, 2012

Fork me on GitHub