CSS 変数と SASS 変数

以前、CSS変数に関する自分の考えについて書いたことがありますが、この属性に対してあまり期待はしていませんでした。SASSの変数に慣れているせいか、CSS変数はどこか不自然なシステムのように感じたからです。しかし、もしあなたも同じように考えているなら、この記事を参考にしてみてください。Why should you care Css variables

CSSの変数はすでに出てからしばらく経ち、ブラウザのサポートもそれほど悪くありません。おそらく皆さんも考えたことがあるでしょうが、これらの変数の機能はSASSでほぼ全て実現可能であり、SASSの関数やSASSの型（リスト、マップ）を組み合わせることで、変数の使用はさらに柔軟になります。

ただし、ここで皆さんに共有したいのは、CSS変数の本当に素晴らしい点はどこにあるのかということです。

この記事では、読者の皆さんがCSS変数の基礎を少しでも理解していることを前提に進めます。

ちなみに、この記事ではCSS変数の使い方を包括的に説明しているわけではないので、何か提案があればぜひ教えてください。後でより包括的な記事を書く時間を見つけたいと思っています。

サポート状況

カスタムプロパティ

プロパティのように振る舞わせることで、通常のプリプロセッサーよりも強力になります。

まず明確にしておきたいのは、CSSの仕様において、変数は実際にはcustom propertyと呼ばれるということです。これはどういう意味か？変数とプロパティの概念が混乱してしまいますね！

焦らないでください。意味するところは、CSS変数を使用する際には、一般的なCSSプロパティとして考えるべきであり、単なる変数として扱うべきではないということです。以下では、CSS変数の使用に関するいくつかのポイントを紹介します。

なぜCSS変数を使うべきか

• これらのプロパティを使うのにプリプロセッサーは必要ありません。
• initialやinheritの方法で階層を構築できます。
• ブラウザは必要に応じて再レンダリングします。
• これらにアクセスし、JavaScriptで操作できます（後ほど説明します）。

プロパティの特性

CSSプロパティである以上、以下の特性があります：

• initialやinheritの値を使用できます。
• 呼び出し方はvar(--variable-name)です。
• inline-styleの中に配置できます。
• JavaScriptで値を取得、設定できます。

中でも、最大のポイントはinline-styleとJavaScriptとの連携が可能なことです。これは従来のSASSやLESSなどのCSSプリプロセッサーとは大きく異なる点で、CSSに新たな可能性をもたらします。それでは、いくつかの例を見てみましょう！

:root {
  --mainColor: #abc;
  --subColor: #ccc;
}

h1 {
  color: var(--mainColor);
}

ここで:rootで宣言された要素は、全ての要素に継承されます。これがcustom propertyの特性です。

インラインスタイル

プロパティなので、このように書くことができます。

<h1 style="color: var(--mainColor);">
  Hello, world
</h1>

確かにこれは特別なことではないように見えます。同じことがクラスやSCSSの変数でも実現可能ですが、これによりインラインスタイルを書く際の選択肢が増えます。

Reactのインラインスタイル

例えば、Reactではインラインスタイルを書く必要がある場合がありますが、色の指定がSCSSの制御から外れると、しばしば不自然に感じます。色コードを直接入力するか、後で修正するために手間をかける必要があります。または、JavaScriptで別に色の変数を保存することも考えられます。最良の方法は、各色変数にクラスを割り当てることです。

今、CSS変数があれば、非常に便利に使えます。

const styles = {
  heading: {
    fontSize: "14px",
    color: "var(--mainColor)",
  },
  warn: {
    color: "var(--warnColor)",
  },
}

const heading = ({ title }) => <h1 style={styles.heading}>{title}</h1>

この記事ではCSS変数の紹介に焦点を当てていますが、実際には他にも優れたReactスタイル管理手法があります。

グリッド

ガターを設定する際、CSS変数を使うことで実現できます。つまり、@media queryの方法で変数に値を設定することができ、これは一般的なプリプロセッサーではできないことです。

JavaScriptの制御

JavaScriptを通じて、CSS変数に値を設定したり取得したりするのは非常に簡単です。これにより、ビューとJSを分離する効果が得られます。例えば、特定の効果をJSで取得し、CSSに渡したい場合、一般的にはJavaScriptで計算した後、その値をインラインスタイルで表示します。

しかし、これには次のような状況が生じる可能性があります：

• この値が自分の意図するものでない場合や、自分で値を操作したい場合、その場合はJavaScriptのコードを再度修正する必要があり、とても面倒です。
• インラインスタイルで値を設定するため、CSSが無力です。

CSS変数があれば、設定や取得が非常に便利です。

値の取得

HTMLElement.style.getPropertyValue("--mainColor")

値の設定

HTMLElement.style.setProperty("--mainColor", "#abc")

したがって、興味のある値を私たちの変数に注入するために、イベントリスナーを適用することも可能です。

const element = document.addEventListener("mousedown", e => {
  // some HTMLElement;
  element.style.setProperty("--pageX", e.pageX)
  element.style.setProperty("--pageY", e.pageY)
})

サポート状況

現在のブラウザがCSS変数をサポートしているかどうかを確認するには、CSS.supportsの構文を使用します。

CSS.supports('(--css: variables)') CSS.supports('not (--css: variables)')

今後の課題

変数管理の方法が増えてきているため、JavaScriptによる変数設定が行われる可能性もあります。したがって、これらの変数を管理する際には、より注意が必要です。

• 変数の宣言を統一して処理する：グローバル変数は一つのファイルやフォルダにまとめておくと、後での扱いが便利です。CSS変数の宣言も同様です。
• もし変数がJSによって設定されるためのものであれば、--js-pageXのようにプレフィックスを付けてマークすることを検討してください。

結論

この記事ではCSS変数の使用方法とシナリオについて紹介しました。以前はCSS変数が非常に不自然に感じており、見た目も良くなく、相応の関数操作もありませんでした。

しかし、CSS変数がカスタムプロパティであるという概念を理解すると、CSSが以前は実現できなかった可能性が見えてきます。私たちはSASSとCSS変数のどちらかを選ばなければならないわけではなく、両者を組み合わせて使用し、以前は達成できなかった強力な効果を生み出すことができるのです。