Toggle scss fichier variable

Question

J'essaie de basculer entre le mode nuit et le mode jour uniquement en changeant les couleurs. J'ai quelques variables de couleur de base à l'intérieur de mon _colors.scss, et ils sont utilisés partout sur mon site. J'utilise React pour basculer un className entre «mode nuit» et «mode jour» à la première div du projet.
J'ai essayé d'emballer les variables dans les noms de classe mentionnés, mais le résultat est qu'aucun autre fichier ne peut accéder aux variables. Par conséquent j'espérais une solution où je pourrais utiliser un fichier en mode nuit et un fichier de jour et basculer entre eux. Le problème est que je ne peux pas envelopper les variables $ ou le @import dans un nom de classe, ce qui rend difficile de savoir quel mode est sélectionné. Je cherche une solution qui n'inclue pas jQuery (j'ai une variable globalement stockée qui peut être utilisée pour la référence javascript si cela finit par être la meilleure solution).

Answer 1

Vous ne pouvez pas basculer les fichiers scss à l'exécution, car ils sont déjà compilés en CSS. Je voudrais aller avec les propriétés personnalisées CSS (parfois appelées variables CSS) au lieu de variables Sass pure.

Exemple:

:root { 
    --background: lightblue; 
} 


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

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

Bascule la classe .night mode avec javascript en fonction du moment de la journée.

Vous pouvez bien nourrir bien sûr vos propriétés personnalisées CSS à partir de variables Sass dans vos fichiers SCSS:

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

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

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

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