今回は久々にCSSのお話です。

これまでに何度かSASSのお話をしてきました。

SASSは変数が使えたり、mixinという関数のようなものが使えたり等とても便利なCSSプリプロセッサーです！

でも通常のCSSでも、CSSネイティブ変数という変数があり、値を定義して使うことができます！

とはいえ、CSSネイティブ変数はまだ実験段階の機能なので、今後なくなる可能性もないとは言い切れません(^^;;

でも今後スタンダードな技術になれば、CSSの記述も効率化できそうですね！

というわけで、試してみました！

まず、↓こんなレイアウトをHTML+CSSで作ってみました。

CSSネイティブ変数を使って、ヘッダーの色とコンテンツ全体の横幅を変えてみようと思います。
変数の宣言はこのような感じです。

変数はハイフン２つを頭につけて『–変数名』として使うのがルールです。

CSSではセレクタの中でしか変数定義ができません。でも複数のセレクタで変数を使いまわしたいことが多いと思います。

そのような場合は:root{}で定義をすると、グローバル変数のように使うことができます。

それでは早速定義した変数を適用してみましょう。

これで適用完了です。

では結果を確認してみましょう！

しっかりと変数の値が適用されましたね！

よく使う値を一度定義しておくと便利です。

今はまだ実験段階でモダンブラウザでしか使えない機能ですが、これがスタンダードになるとCSSの常識も変わりそうです！