Функции CSS

В CSS можно не только писать готовые числа, но и вычислять их. Функция — это запись вида имя(аргументы), которая возвращает значение. Вы уже встречали rgb(), repeat() и linear-gradient(). В этом уроке — функции для размеров: они считают ширину, отступы и шрифт прямо в браузере.

calc() — вычисление

calc() выполняет арифметику: сложение, вычитание, умножение и деление. Главное её достоинство — она смешивает разные единицы, которые нельзя сложить в уме:

<style>
  .box { width: calc(100% - 80px); padding: 12px; background: lavender; }
</style>
 
<div class="box">Ширина: вся строка минус 80 пикселей</div>

Проценты зависят от родителя, пиксели постоянны — результат знает только браузер в момент отрисовки.

min() и max()

min() выбирает наименьшее из значений, max() — наибольшее. Запись width: min(100%, 400px) значит «во всю ширину, но не больше 400 пикселей»:

<style>
  .card { width: min(100%, 400px); padding: 12px; margin-bottom: 8px; background: honeydew; }
  .side { padding: max(2vw, 12px); background: lightyellow; }
</style>
 
<div class="card">Не шире 400 пикселей</div>
<div class="side">Отступ растёт с окном, но не меньше 12 пикселей</div>

Логика кажется перевёрнутой: min() задаёт верхнюю границу, max() — нижнюю.

clamp() — значение в рамках

clamp(минимум, желаемое, максимум) берёт желаемое значение, но не выпускает его за границы. Чаще всего так задают плавный размер шрифта, который растёт вместе с окном:

<style>
  .title { font-size: clamp(1.25rem, 5vw, 2.5rem); margin: 0; }
</style>
 
<p class="title">Заголовок плавно меняет размер</p>

Единица vw — процент ширины окна. Меняйте ширину окна браузера: заголовок растёт и уменьшается без медиазапросов, но не становится меньше 1.25rem и больше 2.5rem.

Функции и переменные

Функции хорошо сочетаются с пользовательскими свойствами — переменными CSS. calc() умножает переменную на число, и из одного значения получается целая шкала:

<style>
  .scale { --step: 8px; }
  .scale div { background: lightskyblue; margin-bottom: 4px; height: 16px; }
  .s1 { width: calc(var(--step) * 5); }
  .s2 { width: calc(var(--step) * 10); }
  .s3 { width: calc(var(--step) * 20); }
</style>
 
<div class="scale">
  <div class="s1"></div><div class="s2"></div><div class="s3"></div>
</div>

Поменяйте --step — изменятся все три полосы сразу.

Шпаргалка

Функция	Что возвращает	Пример
`calc()`	Результат вычисления	`calc(100% - 2rem)`
`min()`	Наименьшее значение	`min(100%, 600px)`
`max()`	Наибольшее значение	`max(50%, 300px)`
`clamp()`	Значение в границах	`clamp(16px, 2vw, 22px)`

Функции можно вкладывать друг в друга, а внутри min(), max() и clamp() можно считать без calc(): min(100% - 32px, 600px).

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

В calc() знаки + и - обязательно окружают пробелами. Без них 100%-80px читается как одно непонятное слово, и браузер отбрасывает всё правило:

<style>
  .box { padding: 12px; margin-bottom: 8px; background: mistyrose; }
  .bad { width: calc(100%-80px); }
  .good { width: calc(100% - 80px); }
</style>
 
<div class="box bad">Без пробелов: правило не сработало</div>
<div class="box good">С пробелами: на 80px уже</div>

Для * и / пробелы не обязательны, но с ними читать легче.

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