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

LESS расширяет CSS динамическими возможностями, такими как переменные, примешивания, операции ифункции. LESS может использоваться как на стороне клиента (IE 6+, Webkit, Firefox), так и на стороне сервера, с Node.js и Rhino. LESS обеспечивает расширения CSS: переменные, вложенные блоки, миксины, операторы и функции.

Переменные

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

// LESS
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
/* Скомпилированный CSS */

#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}

Примешивания (mixins)

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

// LESS
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}

#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
/* Скомпилированный CSS */

#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

Вложенные правила

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

// LESS
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}

/* Скомпилированный CSS */

#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}

Функции и операции

Встречаются ли в ваших таблицах стилей элементы, пропорциональные другим элементам? Операции позволяют увеличивать, уменьшать, делить и умножать и значения и цвета свойств, давая возможность указывать сложные соотношения между свойствами. Функции используются точь-в-точь как в JavaScript-коде, позволяя манипулировать значениями так, как Вам угодно.

// LESS
@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}

/* Скомпилированный CSS */

#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}

Использование на стороне клиента

Подключите таблицу стилей .less при помощи указания rel со значением "stylesheet/less":

Затем скачайте less.js (тут http://lesscss.ru) и подключите его в секции вашей страницы, вот так:

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

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