WordPressの追加CSSではCSS変数が使えない

投稿者: | 2017年12月20日

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カスタムプロパティを使うのはまだ先になりそうです。