在 SASS 中迭代列表时如何使用映射函数？ [复制]

Question

我有一些颜色属性很少的地图列表。我想使用它们拥有的颜色属性为每个地图创建一个类。我正在使用来自here、here 和here 的文档。

到目前为止，我已经想出了以下代码（这是一个.scss 文件）。

$blue: (
  base: #6ac0e2,
  center: #38B5EA,
  shadow: #316980
);

$green: (
  base: #B0BF1A,
  center: #B3BA5D,
  shadow: #316980
);

$bloom_list: $blue, $green;

@each $color in map-keys($bloom_list) {
  .bloom-with-#{$color} {
    @include bloom-background(map-get($color, 'base'), map-get($color, 'center'), map-get($color, 'shadow'));
  }
}

@mixin bloom-background($base_color, $radial_color, $shadow-color) {
  box-shadow: 1px 1px 1px $shadow-color;
  background-color: $base_color;
  @include filter-gradient($base_color, $radial_color, horizontal); // IE6-9 fallback on horizontal gradient
  @include background-image(radial-gradient(center, ellipse cover, $base_color 0%, $radial_color 100%));
}

但我得到一个 SASS 语法错误，

Invalid CSS after "  base": expected ")", was ": #6ac0e2,"

在使用其键进行迭代时获取映射内值的正确方法是什么？

Answer 1

试试这个：

$colourList: (
    green  : (
      base: #6ac0e2, 
      center: #38B5EA, 
      shadow: #316980
    ),

    blue: (
     base: #6ac0e2,
     center: #38B5EA,
     shadow: #316980
   )
);

@mixin bloom-background($base_color, $radial_color, $shadow-color) {
  box-shadow: 1px 1px 1px $shadow-color;
  background-color: $base_color;
  @include background-image(radial-gradient(center, ellipse cover, $base_color 0%, $radial_color 100%));
}
@each $key, $color in $colourList {
  .bloom-with-#{$key} {
     @include bloom-background(map-get($color, 'base'), map-get($color, 'center'), map-get($color, 'shadow'));
  }
}

经过测试并使用 sass(3.4.7 & 3.4.4) compass(1.0.1)