CSS-препроцессоры

Переменные
Философия этого препроцессора - повторное использование CSS синтаксиса там, где это возможно
синтаксис
@название_переменной: значение_переменной;

Объявляем, используя атрибут @

в компиляции

Операции с переменными (операторы)
Допускается производить операции с выражениями, значения которых соответствуют строкам. «*» — игнорируется при условии, что производится операция с явно указанной строкой в выражении не через переменную, а напрямую. Иначе ошибка.

пример

компиляция

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

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

примеси
Примеси являются одним из способов подключить набор свойств из одного правила в другое правило.
Свойства из .bordered появятся в #menu a и в .post a. (Отметьте, что в качестве примеси можно использовать и #id

или

пример

вложенность
Символ "&" используется перед псевдо-классами в нашей вложенной структуре.

css
less

Функции
У less есть много функций, которые трансформируют цвета, работают со строками и числами.

Функции
С помощью LESS-функции spin можно повернуть цветовое колесо на определённый угол относительно заданного цвета и получить новый цвет.
spin(цвет, угол_поворота)
color: spin(red, 90); // цвет повернётся от красного на 90° по часовой
border-color: spin(#f0f, -45); // цвет на 45° от #f0f против часовой

LESS-функции lighten и darken
color: lighten(red, 50%); // светлее red на 50% color: darken(blue, 25%); // темнее blue на 25%
Второе значение задаётся в процентах от 0% до 100%.
При задании 100% в lighten функция возвращает полностью белый цвет,
а 100% для darken — полностью чёрный. То есть эти функции «смешивают» заданный цвет с белым или чёрным.

Работа с цветом

LESS-функции для работы с цветом: saturate и desaturate
color: saturate(green, 20%); // green насыщеннее на 20%
color: desaturate(blue, 50%); // blue бледнее на 50%

Общие функции
color
image-size, image-width, image-height
Convert
default
unit
get-unit
svg-gradient

Пространства имен и аксессоры
Объединение нескольких миксинов и переменных под #bundle, для последующего повторного использования или распределения
#bundle {
.button
{ display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white
}
}
.tab { ... }
.citation { ... }
}

Пространства имен и аксессоры
применение миксин к .button классу в нашем #header
#header a {
color: orange;
#bundle > .button;
}
переменные, объявленные внутри пространства имен будут в области видимости только этого пространства имен и не будут доступны из вне пространства

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

порядок определения переменных имеет значение
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
В данном примере, если мы удалим определение переменной @var внутри #page, то свойство color у #header будет: red, поскольку переменная @var не будет найдена ни внутри #header, ни внутри #page, а только в корне всех правил, где она и содержит значение: red