CSS 変数と SASS 変数 | カランのブログ

自分のCSS変数に対する考えについての記事を書きました。この属性にはあまり期待していなかったのですが、SASSの変数に慣れていたため、CSS変数は逆に不便なシステムのように感じました。しかし、もしあなたも同じように考えているのであれば、この記事を参考にしてくださいなぜCSS変数に注意すべきか

CSSの変数はかなり前から存在しており、ブラウザのサポートもそれほど悪くありません。おそらく皆さんも、これらの変数の機能はほとんどSASSで実現できると思ったことがあるかもしれません。さらに、SASSの関数やSASSの型（リストやマップ）の変数と組み合わせることで、より柔軟な使用が可能です。

しかし、ここで共有したいのは、CSS変数の本当に魅力的な点です。

この記事では、皆さんがすでにCSS変数の基礎を持っていることを前提にしています。

ちなみに、この記事はCSS変数の使用方法について完全に網羅的に書かれているわけではないため、どんな提案でも歓迎します。後日、より包括的な記事を書く予定です。

サポート状況

ブラウザ	バージョン
Chrome	49
Firefox	42
Safari	9.1

カスタムプロパティ

プロパティのように振る舞わせる場合にのみ、それは通常のプリプロセッサよりも強力です

まず最初に明確にしておきたいのは、CSSの仕様では、変数は実際には custom property と呼ばれているということです。これは何を意味するのでしょうか？変数とプロパティの違いがわかりにくいです！

心配しないでください、CSS変数を使用する際には、それらを通常のCSSプロパティとして使用することを考えるべきです。以下では、CSS変数の使用に関するいくつかの情報を紹介します。

なぜCSS変数を使用する必要があるのか

これらのプロパティを使用するためには、プリプロセッサは必要ありません。
initial や inherit のような方法で階層を作成できます
ブラウザが必要に応じて再レンダリングします
JavaScriptでアクセスし、操作することができます（後述します）

プロパティの特性

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

initial や inherit のような値を使用できます
呼び出し方は var(--variable-name) です
inline-style 内に配置できます
JavaScriptで値を取得および設定できます

その中でも最も注目すべき点は、インラインスタイルと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変数を使用することができます。つまり、メディアクエリの方法で変数の値を設定できるということです。これは一般的なプリプロセッサではできないことです。

JavaScriptの制御

JavaScriptの操作を介して、CSS変数の値を簡単に設定または取得することができます。これにより、ビューとJavaScriptを分離する効果が得られます。たとえば、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で変数を設定する可能性もあるため、これらの変数を制御する際には注意が必要です。

変数の宣言を統一的に処理する：グローバル変数は1つのファイルまたはフォルダにまとめておくと便利です。CSS変数の宣言も同様です。
変数がJavaScriptによって設定される場合は、接頭辞を付けてマークすることを試してみてください。たとえば、--js-pageX などです。

結論

この記事では、CSS変数の使用方法とシーンについて紹介しました。以前はCSS変数が非常に不便で、見た目も悪く、対応する関数もありませんでした。

しかし、CSS変数がカスタムプロパティの概念であることを理解すると、CSSの以前には突破できなかった可能性がいくつか見えてきます。SASSやCSS変数を選択する必要はありません。両方を組み合わせて、以前に達成できなかった強力な効果を実現することもできます。