v7.1.0

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";
Warning

CSS Variables を有効化すると、対応していない IE11・Android 4.4 (OS Browser) では色プロパティが認識されなくなります。Ponyfill の導入を検討してください。

Ponyfill

レガシーブラウザ（IE11・Android Browser など）対策として、Ponyfill の導入が可能です。Ponyfill を使えば、レガシーブラウザでアクセスされた場合に変数無しのプレーンな CSS をインライン出力できます。例として、このドキュメントサイトにも実装してあります。

Warning

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";

Sources