• Теория
  • Теория

Математические операции, шаг 1

Два смещённых на 60 градусов цвета на цветовом колесе

Теперь давайте создадим третий цвет. Его «сдвинем» по кругу на 60° в другую сторону от основного. Он светлее и будет использоваться для выделения второстепенной информации и элементов.

Чтобы «сдвинуть» цвет против часовой стрелки, нужно в функцию spin передать отрицательное значение переменной @distance.

Над любыми численными значениями в Less-коде можно произвести математические операции сложения, вычитания, умножения или деления:

padding-top: 10px + 20; // = 30px
padding-bottom: 100px - 50; // = 50px
font-size: 2em * 2; // = 4em
left: 50% / 2; // 25%

Less выполнит математическую операцию и вернёт в CSS уже вычисленное значение. Единицы измерения всегда берутся от первого параметра в выражении.

Чтобы вычислить отрицательное значение @distance просто умножим переменную на -1.

В выражениях Less с обеих сторон операторов + и - необходимы пробелы. Так мы не допустим синтаксической двусмысленности. Без пробелов символ - одновременно может быть интерпретирован и как оператор вычитания, и как часть ключевого слова (например, в inline-block). Операторы * и / можно использовать без пробелов вокруг них, однако обычно их тоже выделяют пробелами для единообразия в коде.
Корнями это требование уходит в CSS и его синтаксис, который полностью поддерживается в Less. Подробнее о синтаксисе выражений в CSS читайте в спецификации.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Знакомство с Less» тренажёра «Инструменты автоматизации: препроцессор» можно после регистрации и оформления подписки.