scss変数ファイルを切り替えます

Question

夜間モードと昼間モードの切り替えは、色を変更するだけです。私は_colors.scssの中にいくつかの基本的な色の変数を持っていて、私のサイトのいたるところで使われています。 Reactを使用して、プロジェクトの最初のdivで 'night-mode'と 'day-mode'の間のclassNameを切り替えます。
上記のクラス名に変数をラップしようとしましたが、その結果、他のファイルが変数にアクセスできなくなりました。したがって、私は、夜間モードのファイルと昼間のファイルを使用し、それらの間で切り替えることができる解決策を望んでいました。

私が今見ているように、変数$ またはを@importをクラス名にラップすることができないため、どのモードが選択されているのかを知ることが難しいという問題があります。私はjQueryが含まれていないソリューションを探しています（変数がグローバルに格納されているため、javascriptのリファレンスとして使用できれば最高のソリューションとなります）。

Answer 1

scssファイルは、すでにCSSでコンパイルされているため、実行時に切り替えることはできません。

純粋なSass変数ではなくCSSカスタムプロパティ（CSS変数とも呼ばれます）を使用します。

例：

:root { 
    --background: lightblue; 
} 


.night-mode { 
    --background: darkblue; 
} 

.component { 
    background-color: var(--background); 
} 

トグル日の時間に応じて、JavaScriptでのクラス.nightモード。

$bg-day: lightblue; 
$bg-night: darkblue; 

:root { 
    --background: $bg-day; 
} 

.night-mode { 
    -- background: $bg-night; 
} 

.component { 
    background-color: var(--background); 
}