Sass会根据body类改变变量的值吗？

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;
}