Sass изменить значение переменной на основе класса тела?

Question

Я пытаюсь создать sass mixin, который позволяет переопределить значение переменной в соответствии с добавленным классом.Я застрял на этом этапе (который не работает), и мне интересно, возможно ли, наконец, сделать это:

$color-1: #9E619B;
$color-2: #BB496A;
$themecolor: red !default;
$color-themes: (
   theme1-pages:
       (
           themecolor: $color-1
       )
   theme2-pages:
       (
           themecolor: $color-2
       )
);

@each $name, $theme in $color-themes {
   body.#{$name} {
       $themecolor: map-get ($name, themecolor);
   }
}

Answer 1

Я думаю, что у вас есть синтаксическая ошибка (дополнительный пробел после map-get) и ошибка в аргументах для map-get(): аргументы должны быть $theme и themecolor соответственно, а не $name и themecolor:

@each $name, $theme in $color-themes {
   body.#{$name} {
       $themecolor: map-get($theme, themecolor);
   }
}

Это потому, что $name - это просто ключ, а $theme - ссылка на значение.Если вы вставите фиксированную версию своего кода в SassMeister :

$color-1: #9E619B;
$color-2: #BB496A;
$themecolor: red !default;
$color-themes: (
   theme1-pages:
       (
           themecolor: $color-1
       ),
   theme2-pages:
       (
           themecolor: $color-2
       )
);

@each $name, $theme in $color-themes {
   body.#{$name} {
      $themecolor: map-get($theme, themecolor);
      color: $themecolor;
   }
}

Вы должны ожидать, что получите это обратно без ошибок:

body.theme1-pages {
  color: #9E619B;
}

body.theme2-pages {
  color: #BB496A;
}