<calc-sum>

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

+

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

-

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

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

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

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

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

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

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

В одном выражении могут использоваться разные типы единиц. Например, вычитание px из %, как в calc(100% - 10px), является допустимым выражением.

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

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

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