2.9 KiB
2.9 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d7dbf367417b2b2512bba | Use @each to Map Over Items in a List | 0 | 使用@each映射列表中的项目 |
Description
@for
指令如何使用起始值和结束值循环一定次数。 Sass还提供了@each
指令,它循环遍历列表或映射中的每个项目。在每次迭代时,变量将从列表或映射分配给当前值。 @each $颜色为蓝色,红色,绿色{地图的语法略有不同。这是一个例子:
。#{$ color} -text {color:$ color;}
}
$ colors:(color1:blue,color2:red,color3:green);请注意,需要
@each $ key,$ colors in colors {
。#{$ color} -text {color:$ color;}
}
$key
变量来引用地图中的键。否则,编译后的CSS将有color1
, color2
...在里面。以上两个代码示例都转换为以下CSS: .blue-text {
颜色:蓝色;
}
.red-text {
红色;
}
.green-text {
颜色:绿色;
}
Instructions
@each
列表的@each
指令: blue, black, red
,并将每个变量分配给.color-bg
类,其中“颜色”部分为每个项目更改。每个类应该将background-color
设置为相应的颜色。 Tests
tests:
- text: 您的代码应该使用<code>@each</code>指令。
testString: 'assert(code.match(/@each /g), "Your code should use the <code>@each</code> directive.");'
- text: 您的<code>.blue-bg</code>类应该具有蓝色的<code>background-color</code> 。
testString: 'assert($(".blue-bg").css("background-color") == "rgb(0, 0, 255)", "Your <code>.blue-bg</code> class should have a <code>background-color</code> of blue.");'
- text: 你的<code>.black-bg</code>类的<code>background-color</code>为黑色。
testString: 'assert($(".black-bg").css("background-color") == "rgb(0, 0, 0)", "Your <code>.black-bg</code> class should have a <code>background-color</code> of black.");'
- text: 您的<code>.red-bg</code>类应该具有红色的<code>background-color</code> 。
testString: 'assert($(".red-bg").css("background-color") == "rgb(255, 0, 0)", "Your <code>.red-bg</code> class should have a <code>background-color</code> of red.");'
Challenge Seed
<style type='text/sass'>
div {
height: 200px;
width: 200px;
}
</style>
<div class="blue-bg"></div>
<div class="black-bg"></div>
<div class="red-bg"></div>
Solution
// solution required