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