SCSSを使用してデフォルト値とCSS変数を生成する

Question

Web サイトのスタイルを実装しています。

レガシー サポートの理由から、少なくともしばらくの間は IE11 をサポートする必要があります。ワークフローと私の健全性の理由から、私は可能な限り CSS 変数を使用したいと考えています。

このソリューションを調べたところ、機能するものは生成されますが、使用するとかなり冗長になります。

私の目標は、CSS 変数によってすぐにオーバーライドされるハードコードされた値を最終的に得ることです。このようにして、全員にデフォルトのテーマを追加したり、CSS 変数をサポートするブラウザーに別のテーマ (ダーク モードなど) を追加したりできます。もちろん、これをすべて自分で書く必要はありません。

したがって、私のアイデアは、次のようなものを書くことができるということです:

リーリー

に翻訳されます リーリー

これは scss を使用して実現できますか?私は、ランダムな npm モジュールや他のサードパーティのコンパイラやトランスパイラを追加して、このプロジェクトを肥大化させたくありません。 IE11 にポリフィルを追加して CSS 変数のサポートを追加できることはわかっていますが、これまでに見つけたもののほとんどには何らかの残念な制限があります (さらに、それらはサードパーティ製であり、私が好むコードです)可能であれば避けてください)。これは、SCSS を使用する適切なソリューションがない場合に使用する可能性のあるソリューションです。

Answer 1

改善が必要な簡単な解決策は次のとおりです:

1. すべての色を使用してマップを定義します:

リーリー

2. マップをループして CSS カスタム プロパティを作成します:

リーリー

3. フォールバック合計値を出力するミックスインを作成します。
   CSS プロパティと必要な色の 2 つのパラメーターを取るミックスインを作成することにしました。

リーリー

4. その後、次のように使用できます:

リーリー

---

完全なコード:

リーリー