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

Question

Я столкнулся с проблемой, когда мне проще определить две базовые карты, которые можно переключать между ними с помощью одной переменной (кажется, легче для базовых, светлых / темных тем)

https://codepen.io/anon/pen/bLwNaW

Я пытаюсь установить значение $ theme-used, проверить его в If / Else и использовать конкретную карту на основе этого результата. Это облегчает мне вход и устанавливает $ theme-used-used для dark и меняет все базовые переменные.

Я пробовал:

@if (#{$theme-being-used} == light) {

@if ($theme-being-used == light) {

@if (#{$theme-being-used} == "light") {, etc..

Кто-нибудь знает, можно ли это сделать? В любом случае это не имеет большого значения, просто немного экономит время при создании сайтов с шаблонами.

До того, как я достиг этого, просто прокомментировал / раскомментировал код, т.е.

$palette: (
    // Light 
    ui: (
        primary:    #FFFFFF,
        secondary:  #EEEEEE,
        alternate:  #DDDDDD
    ),
    // Dark - COMMENTED when I want to use light variables
    /*ui: (
        primary:    #333,
        secondary:  #444,
        alternate:  #555
    ),*/
);

Это хорошо и довольно быстро, но было бы проще установить его в одном месте и не делать этого.

Благодарю.

Answer 1

Место $theme-being-used проверить, чтобы _palette функция. Эта функция принимает только один параметр - имя цвета. И содержит всю логику выбора цвета внутри себя.

Sassmeister демо.

$theme-being-used: light;

$palette: (
    dark: (
        primary:   red,
        secondary: orange,
        tertiary:  blue
    ),
    light: (
        primary:   green,
        secondary: black,
        tertiary:  yellow
    )
);

@function _palette($color-name, $theme-name: $theme-being-used) {
  // Select one of available themes
  // Here there may be more complex logic in choosing themes
  $theme: map-get($palette, #{$theme-name});

  // Get the color from theme
  @return map-get($theme, #{$color-name});
}

.s-o {
  background: _palette(primary);

  &:hover {
    background: _palette(secondary);
  }
}