SCSS. Как изменить глобальную переменную в зависимости от класса body?

Question

[vladymyr_olegovich]

На странице есть блоки (островки) с белым фоном. Цвет фона лежит в переменной $bg.
Если у body есть класс "dark", то значение переменной $bg необходимо поменять на черный.
Переменная находится в файле "_variables.scss".

Как можно сделать, чтобы фон блоков менялся на значение переменной при смене класса body?
Можно сделать так, чтобы в главной файле стилей все осталось прежним, нечего не нужно было менять, значение переменной само применялось?
Надеюсь понятно объяснил. Если что, с SCSS работаю около недели

Может можно сделать что то на подобие этого?

$bg_island_color: #fff;

body.bg_dark, body.bg_light{
        // При "bg_dark" или "bg_light" переопределяет значение
	$bg_island_color: rgba(51,51,51,0.4)!global;
}

Comments

[Влад Токарев]

Помогло?

Answer 1

[Влад Токарев]

Использовать миксины, примерно так

@mixin bodyMixin($color1: #000, $color2:#fff) {
    .block1 {
        color: $color1;
    }
    .block2 {
        background: $color2;
    }
}

body {
    @include bodyMixin();
}

body.dark {
    @include bodyMixin(#fff, #000);
}

Comments

[vladymyr_olegovich]

Делал что-то вроде этого.
Для каждых элементов, где нужно было менять bg/шрифт и тд писал такую штуку:
%bg {
background-color: $bg_island_white;
.bg_dark &, .bg_light &{
background-color: $bg_island_dark;
}
}

Answer 2

[Fahrenhe17]

Можно назначить разные переменные под разные цвета и назначить зависимость стилей внутренних элементов. Например:

body.first-color-scheme {
  div.first-color {
    background-color: $green;
  }
  div.second-color {
    background-color: $blue;
  }
}

body.second-color-scheme {
  div.first-color {
    background-color: $orange;
  }
  div.second-color {
    background-color: $pink;
  }
}

Comments

[vladymyr_olegovich]

Дело в том что блоков с белым фоном много, и они далеко не все с одним классом. Вашим предложением придется к каждому классу приписывать все варианты(

[Fahrenhe17]

vladymyr_olegovich: можно добавить ещё один общий класс ко всем остравкам который будет отвечать только за бэк

[Fahrenhe17]

vladymyr_olegovich: или же, если же все островки обернуты в какой-то тег, можно сделать .class > .oblako-bg {...}