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＆amp; 3.4.4）指南针（1.0.1）

如何在SASS中迭代列表时使用地图功能？

1 个答案: