純粋なCSSのCSS変数–5分以内に開始

純粋なCSSのCSS変数（または正式にはカスタムプロパティ）は、それらの使用方法を学ぶために5分を費やすことをいとわない人にとっては大幅な時間の節約になります。 それらはCSS3以来存在しており、すべてのユーザーの92％がそれらをサポートするブラウザーを持っています。 CSS変数を使用すると、既存のスタイルシートや新しいツールに大きな変更を加える必要がなく、古いプロジェクトに簡単に適用できます。 ファイル内の数百の場所に16進カラーコードを書き留める代わりに、CSS変数を使用して1か所で定義することができます。 大幅な時間の節約とスタイルシートの一貫性の向上に役立ちます。

待って、これはSaas以下ですよね？

いいえ、ここでは純粋なCSSについて話しているのであって、Saas、Less、SCSSなどのプリプロセッサと組み合わせたCSSではありません。 CSS変数を使用する場合、追加のツール、エディター、ワークフローの変更、またはその他の使用は必要ありません。 したがって、変数のない既存のCSSファイルは「特別な」変更を必要とせず、混合して一致させることができます。変数はファイルの一部にのみ使用するか、一部のファイルにのみプロジェクトを使用します。

SaasやLessなどのCSSプリプロセッサも変数をサポートしています。 また、使用できる機能やオプションがたくさんあります。 ただし、その名前が示すように、プリプロセッサが必要です。これは、Saasで記述されたCSSを純粋なCSSに変換するツールです。 変数のみが必要な場合–純粋なCSSには必要なものがすべて揃っています。

CSS変数はネイティブ関数であり、それがそれらを優れたものにしているのです。 最小限の労力で、スタイルシートははるかに読みやすく、一貫性があります。 さらに、後で行う必要のある変更ははるかに簡単です。何百もの場所でカラーコードを変更する必要がある場合に、検索と置換を行うよりも確かに高速です。

いくつかの変数を作成しましょう

他のプログラミング言語と同様に、変数を使用するには2つのステップがあります。変数に値を与える（定義する）ことと、変数を使用する（その値が必要なすべての場所に置く）ことです。 同じことをします。

:root {
  --my-red: #ff0080;
  --my-shadow: 3px 3px 10px green;
  --my-border: 1px solid #222222;
}

.custom-box {
  box-shadow: var(--my-shadow);
}

.custom-text {
  color: var(--my-red);
  border: var(--my-border);
}

CSSファイルでグローバルに（どこでも）変数を使用する場合は、 :root疑似クラスで定義する必要があります。 ファイル内の場所は関係ありません。 ファイルの最初または最後に置くことができます。 ただし、変数を:rootに配置する必要があります。 名前は二重ダッシュ--始まる必要があり、スペースを含めることはできません。 CSS変数は、通常CSSプロパティに割り当てる任意の値を保持できます。 色のような単純な値から、背景や影のような省略形の複雑な表現まで。

変数を使用するには（その値を取得するために）、変数をvar()関数に配置します。 すべての変数名が--で始まることを忘れないでください。 始めるために知っておく必要があるのはこれだけです。

フォールバック値の使用

変数が定義されていない場合は、フォールバック値を2番目のパラメーターとしてvar()関数に提供できます。

:root {
  --my-red: #ff0080;
  --my-blue: #0020ff;
  --my-shadow: 3px 3px 10px green;
}

.custom-box {
  box-shadow: var(--my-shadow, 2px 2px 5px blue);
}

.custom-text {
  color: var(--my-red, var(--my-blue, red));
}

プロパティ値が複雑なものであっても心配しないでください。 フォールバックパラメーターはコンマを許可します（ box-shadow例を参照）。 また、 .custom-textの色で示されているように、複数のvar()関数を連鎖させることもできます。 --my-red変数と--my-blue変数が定義されていない場合、色として赤が使用されます。

var()とcalc() ）の組み合わせも機能しますが、構文に驚くことはありません。 これは、それが定義されたクラスでのみ使用可能なローカル変数を含む例です。

.box {
  --padding: 10px;
  
  height: calc(var(--padding) + 100px);
  padding: var(--padding);
}

calc()は慎重に使用してください。 これは悪いことではありませんが、使いすぎるとデバッグと保守が非常に困難になります。

JavaScriptを介したCSS変数の取得と設定

プレーンJavaScriptを使用することで、新しいCSS変数を設定し、それらの値にアクセスできます。 私はこの方法を使いません。 代わりに、要素のクラスを変更することを好みます。 ただし、JavaScriptを介してCSS変数にアクセスする場合は問題ありません。 それは確かにいくつかの状況で使用可能です。 jQueryに固執する人は、コードをjQueryプラグインに変換できます。

新しい変数を作成する、または既存の変数の値を変更するには、次のようにします。

// set var value
document.documentElement.style.setProperty('--my-var', 'blue');

変数へのアクセスはもう少し複雑です。 変数がJSを介して定義されている場合は、次を使用します。

// get var value if defined via JS
document.documentElement.style.getPropertyValue('--my-var');

ただし、CSSを介して定義されている場合（通常はそうなります）、次のコードを使用します。

// get var value if defined via CSS
getComputedStyle(document.documentElement,null).getPropertyValue('--my-var');

問題と注意すべき点

変数の使用方法がわかったので、変数を使いすぎて、スタイルシートのすべてのプロパティ値に対して変数を作成しないでください。 たとえば、これは概念全体のやり過ぎと乱用になります。

:root {
  --spacing-10: 10px;
}

.custom-box {
  padding: var(--spacing-10);
}

あなたは何も達成しませんでした。 10pxの代わりに--spacing-10を取得しました。 間もなく、5pxから100pxまでのパディングピクセル値ごとにさらに20個の変数を作成することになります。 一貫性を保つ場合は--small-padding, --medium-padding, --large-paddingの概念を使用して、適切な数値を割り当てます。

CSS標準では必須ではありませんが、すべての変数を1か所でCSSファイルの先頭に定義することを心からお勧めします。 そうすれば、それらがどこにあるかを常に把握し、値をすばやく変更できます。 ファイル全体に定義を分散させると、物事を追跡するのに苦労し、同じ変数を複数の場所で定義してしまう可能性があります。 楽しい作業ではないデバッグ。

CSS変数を使用しない理由はありません

インターネットでは、物事は急速に進んでいます（Cookieがローカルストレージに置き換えられるなど）。 大規模なプロジェクトや大規模なチームにとって、SaasのようなCSSプリプロセッサに切り替えるのが正しい方法です。 ただし、小規模なプロジェクトやメンテナンスが必要な既存のプロジェクトの場合、純粋なCSSのCSS変数が適切なソリューションです。 変更、ソフトウェアやツールのアップグレードなどはまったく必要ありません。 変数を定義して使用を開始します。