Задать вопрос
@vladymyr_olegovich
css

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

На странице есть блоки (островки) с белым фоном. Цвет фона лежит в переменной $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;
}
  • Вопрос задан
  • 1457 просмотров
1 комментарий
Подписаться 3 Оценить 1 комментарий
Решения вопроса 1
Vadiok
@Vadiok
Веб разработчик
Использовать миксины, примерно так
@mixin bodyMixin($color1: #000, $color2:#fff) {
    .block1 {
        color: $color1;
    }
    .block2 {
        background: $color2;
    }
}

body {
    @include bodyMixin();
}

body.dark {
    @include bodyMixin(#fff, #000);
}
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 1
Fahrenhe17
@Fahrenhe17
Ruby on Rails developer
Можно назначить разные переменные под разные цвета и назначить зависимость стилей внутренних элементов. Например:

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;
  }
}
Ответ написан
3 комментария
3 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Каталог AI tools
18 апр. 2024, в 01:12
150000 руб./за проект
Загрузка характеристик из xml/csv файла в карточки товаров WordPress
18 апр. 2024, в 00:58
5000 руб./за проект
Нарисовать подарки для соц сети
18 апр. 2024, в 00:10
50000 руб./за проект
Ещё заказы