Использование CSS-функции calc() в LESS

07.02.2019

В CSS есть функция calc(), которая даёт возможность рассчитать значения свойств CSS во время их определения. Функция calc() принимает в качестве параметра математическое выражение, результат вычисления которого можно использовать как значение CSS свойства. Выражение может включать операторы +, -, *, / с использованием стандартных правил приоритета операторов. Можно использовать разные единицы измерения для каждого из операндов, а также можно использовать скобки, чтобы указать порядок вычисления.

Например:

.item {
  width: calc(100% - 10px);
}

Но при использование препроцессора LESS нужно использовать немного другой вывод:

.item {
  width: calc(~'100% - 10px');
}

Вариант использования функции calc() в LESS с переменными:

.item {
  @pad: 10px;
  width: calc(~'100% - @{pad}');
}

Полезная инфа:

Оставить комментарий