id	title	challengeType	forumTopicId
587d7dbf367417b2b2512bba	使用 @each 遍历列表中的项目	0	301461

--description--

最后一个挑战显示了@for指令如何使用起始值和结束值循环一定次数。Sass 还提供@each指令，该指令循环遍历列表或映射中的每个项目。在每次迭代时，变量将从列表映射赋值给当前值。

@each $color in blue, red, green {
  .#{$color}-text {color: $color;}
}

map 的语法略有不同。这是一个例子：

$colors: (color1: blue, color2: red, color3: green);

@each $key, $color in $colors {
  .#{$color}-text {color: $color;}
}

请注意，需要$key变量来引用 map 中的键。否则，编译后的 CSS 将包含color1，color2...... 以上两个代码示例都转换为以下 CSS：

.blue-text {
  color: blue;
}

.red-text {
  color: red;
}

.green-text {
  color: green;
}

--instructions--

编写一个@each指令，通过一个列表：blue,black,red并将每个变量分配给.color-bgclass, 其中每个项目的“颜色”部分都会发生变化。每个 class 都应该将background-color设置为相应的颜色。

你的代码应使用@each指令。

assert(code.match(/@each /g));

.blue-bgclass 背景色应为蓝色。

assert($('.blue-bg').css('background-color') == 'rgb(0, 0, 255)');

.black-bgclass 背景色应为黑色。

assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)');

.red-bgclass 背景色应为红色。

assert($('.red-bg').css('background-color') == 'rgb(255, 0, 0)');