LESS — это динамический язык стилей, препроцессор CSS, позволяющий писать ясный CSS с использованием программных конструкций вместо статических правил. LESS включает в себя такие расширения CSS, как переменные, вложенные блоки, примеси, операторы и функции.
Синтаксис переменных:
@название_переменной: значение_переменной;
В результирующем CSS значение переменной будет подставлено в стиль.
Например, LESS-код:
@background-color: #ffffff; @color: #373833; body { background: none repeat scroll 0 0 @background-color; color: @color; }
Будет скомпилирован в следующий CSS:
body { background: none repeat scroll 0 0 #ffffff; color: #373833; }
Примеси позволяют включать целый набор свойств из одного набора правил в другой путём включения имени класса в качестве одного из свойств другого класса. Они также могут вести себя подобно функциям, принимая аргументы.
Например, LESS-код:
.mixin(@color: #f55555) { border: 1px solid @color; border-radius: 5px; } .span-class { .mixin; } .div-class { .mixin(#a0d468); }
Будет скомпилирован в следующий CSS:
.span-class { border: 1px solid #f55555; border-radius: 5px; } .div-class { border: 1px solid #a0d468; border-radius: 5px; }
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; }
LESS позволяет использовать операции и функции. Благодаря операциям можно складывать, вычитать, делить и умножать значения свойств и цветов, что можно использовать для создания сложных отношений между свойствами.
Список цветовых функций:
Например, LESS-код:
@background-color: #ffffff; @block-description-color: darken(@background-color, 50%); .caption { color: @block-description-color; }
Будет скомпилирован в следующий CSS:
.caption { color: #808080; }