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

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

0 голосов
/ 02 ноября 2018

Почему я не могу изменить переменную 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>

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

1 Ответ

0 голосов
/ 02 ноября 2018

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

В Sass все переменные, объявленные вне миксина или функции , будут иметь глобальную область видимости и на них можно ссылаться в любом селекторе 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";
}
...