Операторы и математика

Sass умеет вычислять значения при компиляции: удвоить отступ, разделить ширину на колонки, перевести пиксели в rem. Браузер получает только результат. Арифметика работает обычными операторами, а сложная математика берётся из встроенного модуля sass:math.

Арифметические операторы

+, -, * и % работают с числами, в том числе с единицами измерения:

// styles/main.scss
$gap: 16px;
 
.card {
  padding: $gap;
  margin-bottom: $gap * 2;
  border-width: $gap - 14px;
}

.card {
  padding: 16px;
  margin-bottom: 32px;
  border-width: 2px;
}

Единицы сохраняются: 16px * 2 — это 32px. Складывать числа с одинаковой единицей можно, складывать px с em — нет.

Деление через math.div

В CSS знак / часто означает не деление, а разделитель: font: 16px/1.5 sans-serif, grid-area: 1 / 3. Поэтому деление через / в Sass устарело. Делите функцией math.div() из модуля sass:math, который подключается правилом @use в начале файла:

// styles/main.scss
@use "sass:math";
 
$container: 960px;
 
.column {
  width: math.div($container, 3);
}
 
.half {
  width: math.div(100%, 2);
}

.column {
  width: 320px;
}
 
.half {
  width: 50%;
}

math. — это пространство имён модуля: каждая функция sass:math вызывается через него. Модулям посвящена отдельная глава.

Другие функции sass:math

Функция	Что делает	Пример и результат
`math.round()`	Округляет до целого	`math.round(12.6px)` → `13px`
`math.floor()`, `math.ceil()`	Округляет вниз, вверх	`math.ceil(12.1px)` → `13px`
`math.percentage()`	Переводит долю в проценты	`math.percentage(0.25)` → `25%`
`math.min()`, `math.max()`	Наименьшее, наибольшее	`math.max(8px, 12px)` → `12px`
`math.abs()`	Убирает минус	`math.abs(-4px)` → `4px`

Практический пример — ширина колонки из двенадцати:

// styles/main.scss
@use "sass:math";
 
.col-4 {
  width: math.percentage(math.div(4, 12));
}

.col-4 {
  width: 33.3333333333%;
}

Сравнение и строки

==, !=, <, >, <= и >= сравнивают значения и возвращают true или false — они понадобятся в условиях. Оператор + также склеивает строки: "icon-" + "home" даёт "icon-home".

Частая ошибка

Sass не может сложить единицы, которые зависят от страницы, например 100% и 20px: их сумма известна только в браузере. Выражение 100% - 20px останавливает компиляцию с ошибкой 100% and 20px have incompatible units. Оставьте такие вычисления браузеру через calc() — Sass подставит переменные и сохранит функцию:

// styles/main.scss
$sidebar: 240px;
 
.content {
  width: calc(100% - #{$sidebar});
}

.content {
  width: calc(100% - 240px);
}

Скобки #{} вставляют значение переменной в текст — это называется интерполяцией. Внутри calc() Sass примет и просто $sidebar, но #{} делает намерение очевидным.

Спасибо, что читаете!