演算子を使ってみる

CSSプリプロセッサーや他の言語と同様に、変数に*基本演算子(+, -, , /)を混ぜて使うこともできます。
CSSの場合は「calc()」関数が用意されており、カスタムプロパティーを含めた演算を行います。

.box{
　　--base-size: 10px;
　　--indent-xl: calc( 2 * var(—base-size));
　　--indent-l: calc(var(—base-size) + 2px);
　　--indent-s: calc(var(—base-size) - 2px);
　　--indent-xs: calc(var(—base-size) / 2);
}

やっかいなのは、単位をつけるかどうかです。
しかし、単位は次のように「calc()」の中に入れてやることで解決します。

.box{
　　--space: 10;
　　padding: var(--space)px 0; // ×
　　padding: calc(var(--space)*1px) 0; // ○
}

CSSワイドなキーワードにも対応

CSSカスタムプロパティは他のCSSのプロパティと同じルールで働きます。
したがって、CSSワイドな値である「initial」や「unset」なども対応しています。

  • initial：初期値を指定値にする
  • inherit：継承値を指定値かつ算出値にする
  • unset：継承するプロパティについてはinherit、そうでないものにはinitialにする
  • revert：ユーザーエージェントのスタイルシートによって決められた初期値にする

これらをCSSで使うと、例えばこのようになります。

.common-values{
　　--border: inherit;
　　--bgcolor: initial;
　　--padding: unset;
　　--animation: revert;
}

また、コンポーネントを作りたい時に、うっかりして他のスタイルやカスタムプロパティを読み込みたくない場合があります。
通常、そうした場合にはCSSをモジュール化して組み込むのが一般的な解決策でしょう。

しかし、「all」プロパティを使うことで解決することができます。
このプロパティは、CSSプロパティをすべてリセットしたい時に使います。

.all-reset{
　　all: initial;
}

しかし、残念ながらこの「all」プロパティはCSSカスタムプロパティまではリセットを行いません。
現在、「--」という接頭辞を「all」と同じように使ってカスタムプロパティをリセットできるようにするかどうか、議論が行われています。

最終的には、このようにリセットが行われるようになります。

.all-custom-properties-reset{
　　--: initial;
}

JavaScriptでカスタムプロパティの値を取得する

CSSカスタムプロパティはDOM操作に対応しているので、JavaScriptを使ってCSSカスタムプロパティの値を取得することができます。

例えば、以下のCSSカスタムプロパティを定義したとしましょう。
:root {
　　—font-color: #0060e6;
}

JavaScript側では、このように定義します。

var value = document.documentElement.style.getPropertyValue(‘—font-color');
console.log(value);

CSS側でどんな変数が定義されているのかを見に行き、JavaScriptで何かしらの処理を入れられるようになります。

また、値を変更する場合はこのように処理を行います。

document.documentElement.style.setProperty('--key-color', ‘ #006090 ’);