構文
<calc-sum> 型は 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%) は長さの後に加算演算子と負のパーセント値が続くものとして処理されます。
仕様書
| Specification |
|---|
| CSS Values and Units Module Level 4 # typedef-calc-sum |