CSS変数(正確にはCSSカスタムプロパティ)は、その名の通りCSSで変数を定義して再利用できるものです。
なんて便利なのでしょう!!d(・∀・○)
詳しい使用方法は「CSS Custom Properties for Cascading Variables Module Level 1」に記載があります。
対応状況
主要なブラウザでは概ね対応しています。
サンプル
変数の宣言
:root {
--main-font-color: black;
}
変数の使用
span {
color: var(--main-font-color);
}
WordPressの追加CSSでの対応状況
残念ながらWordPress標準機能に用意されている"追加CSS"内では、CSSカスタムプロパティは利用できません。
- 接頭語"--"は構文エラー
- 接頭語"var-"は構文エラーにはならないが機能しない
base on https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_variables
ノート: 初期仕様のカスタムプロパティの接頭辞は var- でしたが、最新の仕様では -- に変更されました。
まとめ
WordPressでCSSカスタムプロパティを使うのはまだ先になりそうです。