2.1 LESS

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;
}

Импорт

@import "/path/file.less";

путь указывается от корневой директории сайта.

Примеси

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

Например, 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 позволяет использовать операции и функции. Благодаря операциям можно складывать, вычитать, делить и умножать значения свойств и цветов, что можно использовать для создания сложных отношений между свойствами.

Список цветовых функций:

• lighten(@color, 10%); // возвращает цвет, который на 10% светлее, чем @color
• darken(@color, 10%); // возвращает цвет, который на 10% темнее, чем @color
• saturate(@color, 10%); // возвращает цвет, который на 10% более насыщенный, чем @color
• desaturate(@color, 10%); // возвращает цвет, который на 10% менее насыщенный, чем @color
• fadein(@color, 10%); // возвращает цвет, который на 10% менее прозрачен, чем @color
• fadeout(@color, 10%); // возвращает цвет, который на 10% более прозрачен, чем @color
• fade(@color, 50%); // возвращает @color с 50%-ной прозрачностью
• spin(@color, 10); // возвращает цвет с оттенком в 10 раз большим, чем @color
• spin(@color, -10); // возвращает цвет с оттенком в 10 раз меньшим, чем @color
• mix(@color1, @color2); // возвращает микс цветов @color1 и @color2

Например, LESS-код:

@background-color: #ffffff;
@block-description-color: darken(@background-color, 50%);

.caption {
	color: @block-description-color;
}

Будет скомпилирован в следующий CSS:

.caption {
	color: #808080;
}