freeCodeCamp/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/sass/use-each-to-map-over-items-in-a-list.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
587d7dbf367417b2b2512bba	使用 @each 遍歷列表中的項目	0	301461	use-each-to-map-over-items-in-a-list

--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 ，將每個變量分配給 class 爲.color-bg 的項目，使每個項目的 color 都不一樣。 每個 class 都應該將 background-color 設置爲相應的顏色。

--hints--

代碼應使用 @each 指令。

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

.blue-bg class 的 background-color 應爲藍色。

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

.black-bg class 的 background-color 應爲黑色。

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

.red-bg class 的 background-color 應爲紅色。

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

--seed--

--seed-contents--

<style type='text/scss'>



  div {
    height: 200px;
    width: 200px;
  }
</style>

<div class="blue-bg"></div>
<div class="black-bg"></div>
<div class="red-bg"></div>

--solutions--

<style type='text/scss'>

  @each $color in blue, black, red {
    .#{$color}-bg {background-color: $color;}
  }

  div {
    height: 200px;
    width: 200px;
  }
</style>

<div class="blue-bg"></div>
<div class="black-bg"></div>
<div class="red-bg"></div>

---

<style type='text/scss'>

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

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

  div {
    height: 200px;
    width: 200px;
  }
</style>

<div class="blue-bg"></div>
<div class="black-bg"></div>
<div class="red-bg"></div>