Значения переменных в зависимости от класса

Question

Значения переменных в зависимости от класса

Почему я не могу изменить переменную scss в зависимости от класса? Я хочу, чтобы переменная была зеленой, когда в классе темный режим.

Css:

$test: red;

@mixin darkTheme {
  $test: green;
}

.theme-dark {
  @include darkTheme();

  .test {
    background-color: $test;
  }
}

Html:

<body class="dark-mode">
  <div class="test">test</div>
</body>

Как мне это сделать? Чего я не хочу, так это двух переменных.

0

bootstrap-4 sass scss-mixins

Источник

user4975661 01 ноя '18 в 21:44

1 ответ

Другие вопросы по тегам bootstrap-4 sass scss-mixins

user4375502 02 ноя '18 в 00:34 2018-11-02 00:34 · Answer 1 · 2018-11-02 00:34

Это из-за переменной области видимости.

В Sass все переменные, объявленные вне mixin или функции, будут иметь глобальную область видимости и на них можно ссылаться в любом селекторе Sass, который использует переменную. ( источник)

Это означает, что любое значение переменной, установленное внутри миксина или функции, доступно только внутри этого миксина или функции, даже если переменная была ранее установлена глобально.

Переключение между различными наборами переменных Sass

Partials

Вы можете иметь частичный файл для каждой темы и импортировать его в родительский класс каждой темы.

_theme-dark.scss

$background-color: #000;
$text-color: #fff;

_theme-light.scss

$background-color: #fff;
$text-color: #000;

_themed-page.scss

body {
    background: $background-color;
    color: $text-color;
}

тема-styles.scss

.theme-dark {
    @import "theme-dark";
    @import "themed-page";
}

.theme-light {
    @import "theme-light";
    @import "themed-page";
}

Карты

Другой вариант - сохранить значения темы на карте и использовать функцию полезности для получения нужного значения. ( источник)

_theme-variables.scss

$theme: 'default';

$theme-values: ( 
    'background-color': ( 
        'default': #eee,
        'light': #fff,
        'dark': #000
    ),
    'text-color': ( 
        'default': #333,
        'light': #000,
        'dark': #fff
    )
);

@function theme-value($key) {
    $map: map-get($theme-values, $key);
    @return map-get($map, $theme);
}

_themed-page.scss

body {
    background: theme-value('background-color');
    color: theme-value('text-color');
}

тема-styles.scss

.theme-dark {
    $theme: 'dark';
    @import "themed-page";
}

.theme-light {
    $theme: 'light';
    @import "themed-page";
}