Проявляем сме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)
}

Сделано в Лаборатории Студии Чулакова

Студия Олега Чулакова

Дизайн-студия № 1 в России по версии Tagline, лучший usability / UX в стране по версии Золотого Сайта.

Специализируется на создании сложных систем и сервисов для крупных компаний. Среди клиентов Студии Tele2, ИКЕА, МегаФон, БКС Банк, Yota и другие крупнейшие российские бренды.