Юрий Матюхин
Декабрь, 2012
LESS – это надстройка над CSS, которая расширяет CSS динамическими возможностями, такими как переменные, примешивания, операции и функции.
Любой CSS код – это валидный LESS, но дополнительные элементы LESS не будут работать в простом CSS. Следовательно существующий CSS уже является работоспособным 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 файл (2 способ):
Хотя этот способ немного утомительней, но иногда он является более предпочтительным. Чтобы не конвертировать код при каждой загрузке страницы можно использовать результирующий CSS файл.
Конвертеры: для Windows – Winless и LESS.app для Mac.
Обе программы имеют интуитивно понятный интерфейс, поэтому расписывать как ими пользоваться подробнее не имеет смысла.
LESS может компилироваться на стороне сервера с Node.js и Rhino. Подробнее об этом можно будет прочитать на официальном сайте.
Переменные в LESS работают так же как в большинстве других языкая программирования. Вы можете использовать их для хранения значения, а затем использовать переменные вместо самого значения всякий раз, когда вам это нужно.
@header-font: Georgia; h1, h2, h3, h4 { font-family: @header-font; } .large { font-family:@header-font; }
В примере выше мы объявляем переменную @header-font
и записываем туда значение «Georgia
». Теперь мы можем использовать эту переменную всегда, когда мы хотим установить шрифт Georgia.
Примеси в 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
для округления верхних углов. Когда мы добавляем его к любому другому элементу как примесь мы импортируем правила, которые мы создали для него.
Примеси с параметром - это обычные примеси, в которых можно указывать аргумент при вызове.
.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.
Во время написания CSS мы пользуемся каскадностью стилей. Чтобы изменить поля у параграфа только внутри статьи можно использовать следующий код:
article.post p{ margin: 0 0 12px 0; }
При таком подходе, если нам надо изменить стиль элемента только внутри статьи, нужно будет использовать префикс article.post
для каждого элемента. Это делает написание кода более скучным и усложняет его чтение.
В LESS мы можем вложить эти правила, что даст нам более короткую и логичную версию наших стилей. Например:
article.post { p{ margin: 0 0 12px 0; } }
В LESS можно использовать операции умножения, деления, сложения и вычитания.
.button{ @unit: 3px; border:@unit solid #ddd; padding: @unit * 3; margin: @unit * 2; }
Присваиваем переменной @unit
значение 3px. Затем мы устанавливаем ширину рамки равную значению переменной @unit
, отступы в три раза больше этой ширины, а поля – в два.
В LESS можно использовать операции для смешивания цветов.
Если вы хотите изменить значение цвета, то можете сделать это вычитанием или добавлением другого цвета.
@color: #941f1f; button { background: #941f1f + #222222; border: #941f1f - #111111; }
Вышеприведённая операция с фоном увеличит каждое значение HEX на 2. Результатом будет #B64141
— более светлый вариант оригинального цвета. Операция с рамкой уменьшит каждое значение HEX на 1 и выдаст более темный цвет: #830E0E
.
На практике есть немало случаев, когда мы начинаем с базового цвета и нуждаемся в слегка затемненном или осветленном его варианте.
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 градусов меньший по оттенку
Вы также можете извлекать информацию о цвете:
hue(@color); // возвращает канал тона (`hue`) в указанном @color saturation(@color); // возвращает канал насыщенности (`saturation`) в указанном @color lightness(@color); // возвращает канал светлоты (`lightness`) в указанном @color
Это полезно, если Вы хотите создать новый цвет, основываясь на значениях каналов другого цвета, например:
@new: hsl(hue(@old), 45%, 90%);
в результате @new
получит тон (hue), равный тону цвета @old
, но при этом будет иметь свои собственные насыщенность и светлоту.
LESS предлагает пару удобных математических функций, которые можно применять к числовым значениям:
round(1.67); // вернет `2` ceil(2.4); // вернет `3` floor(2.6); // вернет `2`
Если Вам нужно преобразовать значение в проценты, это можно сделать при помощи функции percentage:
percentage(0.5); // вернет `50%`
LESS придерживается привычного по CSS стиля комментариев:
/* Привет, я комментарий в стиле CSS! */ .class { color: black }
В LESS также возможны однострочные комментарии, они считаются невидимыми, и не появляются в итоговом, скомпилированный выводе CSS:
// Привет, я невидимый комментарий, я не появлюсь в выводе CSS .class { color: white }
Вы можете импортировать файлы .less, при этом все переменные и примеси в них становятся доступными в главном файле. Расширение .less необязательно, так что обе следующие записи сработают одинаково:
@import "lib.less"; @import "lib";
Если Вы хотите импортировать файл CSS, и не хотите, чтобы LESS обрабатывал его содержимое, просто используйте расширение .css:
@import "lib.css";
Директива будет оставлена как есть, и в этом же виде попадет в вывод CSS.
Иногда Вам может потребоваться вывести значение параметра 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