CSS Variables
Table of Contents
Detail
SCSS を利用することで CSS の色プロパティを CSS Variables に置き換えられます。
CSS Variables とは、ブラウザ上の CSS で再利用可能な変数のことを言います。プリプロセッサ(Sass など)の変数とは違い、コンパイルせずともブラウザ上で利用でき、プロパティのオーバーライドが容易・CSS を JavaScript で操作しやすいメリットがあります。
Activation
SCSS 変数 $option-css-variables
を true
で上書きすることで有効化できます。
// Override
$option-css-variables: true;
// Import
@import "~musubii/src/scss/configs/_import.scss";
CSS Variables を有効化すると、対応していない IE11・Android 4.4 (OS Browser) では色プロパティが認識されなくなります。Ponyfill の導入を検討してください。
Ponyfill
レガシーブラウザ(IE11・Android Browser など)対策として、Ponyfill の導入が可能です。Ponyfill を使えば、レガシーブラウザでアクセスされた場合に変数無しのプレーンな CSS をインライン出力できます。例として、このドキュメントサイトにも実装してあります。
Ponyfill は変数を固定値に変換します。ダークモード対応など、動的に変数の値を変更させる処理の再現は困難なため、レガシーブラウザではテーマチェンジ機能自体を封じることをおすすめします。
Install
npm install css-vars-ponyfill
yarn add css-vars-ponyfill
Import
import cssVars from "css-vars-ponyfill"
CDN
<script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@2"></script>
JavaScript
Ponyfill はデフォルト設定のままでも読み込んで実行するだけで、レガシーブラウザを判定し機能します。
cssVars({})
コールバック関数を使って、レガシーブラウザ判定を引き継ぐこともできます。
cssVars({
onComplete() {
document.body.setAttribute("data-browser", "legacy")
}
})
SCSS
Ponyfill はデフォルト設定だと :root
の変数を収集して CSS を出力します。MUSUBii の SCSS をそのまま使うと :root [data-theme="dark"]
も出力されてダークテーマ状態になってしまうため、セレクター変更で逃しておきます。これで、レガシーブラウザはライトテーマ固定となります。
$option-css-variables: true;
$selector-root-dark: "body";
$selector-root-dark-attr: '&[data-theme="dark"]';
@import "~musubii/src/scss/configs/_import.scss";