3. Язык стилей less

LESS — это динамический язык стилей, продукт с открытым исходным кодом. Его первая версия была написана на Ruby, однако в последующих версиях было решено отказаться от использования этого языка программирования в пользу JavaScript. Less это вложенный метаязык: валидный CSS код будет валидной less-программой с аналогичной семантикой. Код LESS может работать как на стороне клиента, используя интерпретатор, написанный на JavaScript, так и на стороне сервера под управлением Node.js или Rhino[3].

LESS обеспечивает следующие расширения CSS[3 ?]: 

• переменные;

• вложенные блоки;

• наследование;

• операторы;

• функции.

Переменные языка less.

Less позволяет использовать переменные. Эта возможность является большим плюсом, так как с чистые css таблицы лишены возможности использования переменных. Использование переменных позволит гораздо легче изменять глобальные свойства элементов, которые распространены по всему документу, таких как цвет, ширина блока и т.п. Имя переменной предваряется символом @. В качестве знака присваивания используется двоеточие (:).

При трансляции значение переменной подставляется в результирующий CSS документ.[2]

@color: #4D926F;

#header {color: @color;}

h2 {color: @color;}

Данный LESS-код будет скомпилирован в следующий CSS-файл:

#header {color: #4D926F;}

h2 {color: #4D926F;}

Наследование в языке less.

Наследование позволяет включать целый набор свойств из одного набора правил в другой, путём включения имени класса в качестве одного из свойств другого класса. Такое поведение можно рассматривать как разновидность констант или переменных. Они также могут вести себя подобно функциям, принимая аргументы. В чистом CSS файле повторяющийся код должен быть продублирован в нескольких местах, а наследование делает код чище, понятней и упрощает его изменение.

Наследование разделяется на два типа[3]:

1. Простое наследование;

2. Параметризованное наследование.

Простое наследование предназначено для копирования стилей одного класса на другой класс без возможности изменения параметров копирования.

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

Пример простого наследования:

.rounded-corners{border-radius: 5px;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;}

.blue-block{ background-color: blue;

.rounded-corners;}

Пример параметризованного наследования:

.rounded-corners (@radius: 5px) {border-radius: @radius;

-webkit-border-radius: @radius;

-moz-border-radius: @radius;}

#footer { .rounded-corners(10px);}

Вложенные правила в языке less.

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

#header {

h1 { font-size: 26px;font-weight: bold; }

p { font-size: 12px;

a { text-decoration: none;

&:hover { border-width: 1px;}

} }}

Данный LESS-код будет скомпилирован в следующий 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;}