`<calc-sum>` тип CSS

<calc-sum> CSS тип данных представляет выражение, выполняющее вычисление в любой математической функции CSS. Выражение выполняет базовую арифметическую операцию сложения или вычитания двух значений.

Синтаксис

Тип <calc-sum> определяет два числовых значения и один из следующих арифметических операторов между ними.

+

Складывает два числа.

-

Вычитает правое число из левого.

Формальный синтаксис

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*

<calc-product> = 
  <calc-value> [ '*' <calc-value> | '/' <number> ]*

<calc-value> = 
  <number> |
  <dimension> |
  <percentage> |
  <calc-constant> |
  ( <calc-sum> )

<calc-constant> = 
  e |
  pi |
  infinity |
  -infinity |
  NaN

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*

Описание

Операндами выражения могут быть значения любого синтаксиса <length>. Можно использовать <length>, <frequency>, <angle>, <time>, <percentage>, <number> или <integer>.

Типы двух операндов должны быть согласованы. Для длин нельзя использовать 0 в значении 0px (или другой единицы длины). Вместо этого необходимо указать явную единицу: margin-top: calc(0px + 20px); — допустимое выражение, а margin-top: calc(0 + 20px); — недопустимое. Типы значений-процентов определяются в зависимости от контекста. Например, margin-top: calc(50% + 20px); — допустимое выражение, поскольку margin-top преобразует проценты в длины.

В выражениях calc-sum также можно использовать переменные CSS. Следующий код calc(10px + var(--variable)) представляет собой допустимое выражение.

Операторы + и - должны отделяться пробельными символами. Например, calc(50% -8px) будет разобрано как «процент, за которым следует отрицательная длина» — это недопустимое выражение, — тогда как calc(50% - 8px) означает «процент, за которым следуют оператор вычитания и длина». Аналогично, calc(8px + -50%) интерпретируется как «длина, за которой следуют оператор сложения и отрицательный процент».

Спецификации

См. также

• <calc-product>
• <calc-value>
• <calc-keyword>