Проявляем смеCALCу в препроцессорах
#frontend #css #stylus #sass #less

Функция calc() дает возможность проводить математические операции прямо в CSS, причем передавать в нее можно разные единицы измерения. Чтобы использовать все возможности этой функции, необходимо обращаться из нее к переменным.

Чистый CSS позволяет делать это без проблем — обращение к переменной производится путем вызова функции var():

--offset: 16px;
.block {
  width: calc(100% - var(--offset));
}

Но поскольку нативные CSS-переменные поддерживают еще не все браузеры, рассмотрим решение аналогичной задачи в популярных препроцессорах.

В SASS для вызова из calc() переменную нужно обернуть в #{ }:

$offset: 16px;
.block {
  width: calc(100% - #{$offset});
}

В Less это делается похожим образом, но строка с calc() экранируется:

@offset: 16px;
.block {
  width: ~"calc(100% - @{offset})";
}

В Stylus синтаксис чуть сложнее:

$offset = 16px;
.block {
  width "calc(100% - %s)" % $offset
}

Если необходимо использовать несколько переменных, Stylus позволяет делать так:

$breadth = 100%;
$offset = 16px;
.block {
  width "calc(%s - %s)" % ($breadth $offset)
}