css - 部分变量是动态的

Question

我正在尝试在 sass (scss) 中执行以下操作，

$colors-#{$type}

但是我明白了

undefined variable $colors-

我找到了一个引用 3.3 release document 的来源，他们确实提到它，但是，我找不到问题的解决方案。

有办法吗？

link to scss

Answer 1

我认为该帖子具有误导性。我在 Github 上发现的每个问题(例如 here 或 here )都推荐使用 map 。在 https://github.com/sass/sass/issues/463 上其中一位贡献者写道:

We've decided to add an association data type (aka map/hash) and it will address this use case.

使用 map 和 map-get() 动态获取您的样式定义。您可以在混合、函数或直接使用它。下面的例子

$colors: (
  "green": #0c0,
  "blue": #00c,
  "red": #c00
);

@mixin my_color($color) {
  color: map-get($colors, $color);
}

@function my_color_func($color) {
  @return map-get($colors, $color);
}

body {
  @include my_color("green");  // use a mixin

  background-color: my_color_func("blue");  // use of a function

  border: 1px solid map-get($colors, "red");  // use directly
}

生成以下 css:

body {
  color: #0c0;
  background-color: #00c;
  border: 1px solid #c00;
}