CSS3

CSS用関数

var()

[Edge]○。→●、mdn

カスケード変数の利用。

以下のCSSが組み込んであります：

<custom-property-name>

カスタムプロパティ（<dashed-ident>）。

<SPAN style="color:var(--Test_Var)">テスト</SPAN>

<declaration-value>

この生成規則は、任意の［1 個以上のトークンからなる並び］に ― その並びが次に挙げるものを包含していないならば ― 合致する：

• <bad-string-token>
• <bad-url-token>
• 対になっていない［<)-token>／<]-token>／<}-token>］
• トップレベルの <semicolon-token>
• "!" を.値にとる <delim-token>

これは、その並び全体として［妥当な宣言がとり得る値］を表現する。¶フォールバック値。

<SPAN style="color:var(--Test_Var, blue)">テスト</SPAN><BR>
<SPAN style="color:var(--TestVar, blue)">テスト</SPAN><BR>

要素上の どのプロパティにも、その値を成す任意の部分に代えて、var() 関数を利用できる。プロパティの値以外 ― プロパティの名前や選択子など ― には、var() 関数は利用できない（そのようにしても、単に無効な構文になるか、変数とは繋がりの無い値になるだけである）。

/*  コンポーネントのスタイル  */
.component .header {
  color: var(--header-color, blue); 
}
.component .text {
  color: var(--text-color, black); 
}
/*  より大きなアプリのスタイル：  */
.component {
  --text-color: #080;
  /* --header-color は、設定されないので、フォールバック値（blue）のまま。 */
}

テスト