<calc-sum>

構文

<calc-sum> 型は 2 つの数値とその間の以下の算術演算子のいずれかを定義します。

+

2 つの数値を足し合わせます。

-

右の数値を左から減算します。

公式定義

<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        

解説

この式のオペランドは、任意の <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 がパーセント値を長さに解決するためです。

CSS 変数 を calc-sum 式に含めることもできます。以下のコード calc(10px + var(--variable)) は有効な式です。

+ および - 演算子は、ホワイトスペースで囲む必要があります。例えば、 calc(50% -8px) はパーセント値に負の長さが続くものとして解釈され、不正な式となります。同様に、 calc(8px + -50%) は長さの後に加算演算子と負のパーセント値が続くものとして処理されます。

仕様書

関連情報

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