Question

我正在尝试在sass（scss）中执行以下操作，

$colors-#{$type}

但我得到

未定义变量$ colors -

我找到了一个引用3.3 release document的来源，他们提及，但是，我无法找到问题的解决方案。

有办法做到这一点吗？

link to scss

Answer 1

我认为该帖子具有误导性。我在Github上找到的每个问题（例如here或here）都建议使用地图。在https://github.com/sass/sass/issues/463上，其中一位撰稿人写道：

我们决定添加一个关联数据类型（也就是map / hash），它将解决这个用例。

使用地图和map-get()动态获取样式定义。您可以在mixin，函数或直接使用它。以下示例

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

变量的一部分是动态的

1 个答案: