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

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

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

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

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

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