Используйте переменную S CSS в зависимости от класса предка

Question

Я пытаюсь реализовать переключение между светлой и темной темами в моем приложении.

Мой HTML выглядит примерно так (упрощенный код):

<div class="root light">
  <div class="child">
    Some text
  </div>
  <div class="child">
    Some other text
  </div>
</div>

И мой текущий S CSS выглядит следующим образом:

.light {
  $custom-bg: lightgreen;
}

.dark {
  $custom-bg: darkgreen;
}

.child {
  background-color: $custom-bg;
}

Fiddle

Идея состоит в том, чтобы использовать переменную custom-bg в дочерних элементах, поэтому всякий раз, когда я хочу изменить тема, мне нужно только переключаться между light и dark классами на root, и дети будут автоматически использовать соответствующее значение background-color.

Но это не работает. Класс child не видит переменную custom-bg, и я не могу понять, как решить эту проблему.

Буду очень признателен за любой совет.

Answer 1

Вы должны переставить свой s css, чтобы он был таким

$custom-bg-dark: darkgreen;
$custom-bg-light: lightgreen;
.light.child{
 background-color:  $custom-bg-light;
}

.dark.child{
  background-color:  $custom-bg-dark;
}

.child {
  background-color: $custom-bg;
}