こんにちは。櫻井です。 この間IE11非対応になって初めてカスタムプロパティを使ったんですがSVGのsymbolとuse組み合わせたらすごい便利だったので今回はその使い方の紹介をしたいと思います。

カスタムプロパティとは

カスタムプロパティとはCSS上で使える変数のことでIE11対応では使用できなかった機能の一つです。 使い方としてはSassの変数と同じように使い回すことが前提のものを変数にするといいです。 変数の定義の仕方はハイフン二つ(—)で始まる変数名の後に格納する内容を記載します。

element {
  --main-color: #012345;
}

CSSのどこからでも変数にアクセスできるようにしたい場合は:root 擬似クラスで定義します。

:root {
  --main-color: #012345;
}

定義した変数を呼び出すときはvar()を使って呼び出します。

h2 {
  color: var(--main-color);
}

カスタムプロパティについては以上です。 個人的には使います色やフォント、transitionなどを変数にしておくといいと思います。

SVGのsymbolとuseとは

symbolはsvgの要素のひとつでSVG上の変数のようなものです。 symbol要素は図形などのグラフィックを定義しておくことでuse要素によって描画させることができ同じグラフィックを複数回使用するときに使うことで構造をシンプルにすることができます。 useはsvgの要素のひとつで図形などのグラフィックに付与されたIDを参照して再利用することができる要素です。

組み合わせると色違いが簡単に

このカスタムプロパティとSVGのsymbolとuseを使うと色違いがシンプルに作れます。 symbolとuseを使えばhtml上にインラインで長いSVGを大量に記述する必要はなくなり、カスタムプロパティを使えば色の箇所をカスタムプロパティに置き換えておけばあとはクラスごとに色を定義するだけで良くなります。 transitionを効かせたい場合はuseにfillとtransitionを当てれば効いてくれます。

See the Pen Untitled by knap_develp (@knap_develp) on CodePen.

まとめ

カスタムプロパティを今回初めて使ったんですが普段Sassを使っている変数と同じ感じで浸かるんだなということを実感できました。 SVGと組み合わせることでHTMLもCSSもシンプルに書けて個人的に大満足でした。カスタムプロパティの便利な使い方を他にも発掘できたらまたブログにしたいと思います。