--- id: 587d7dbf367417b2b2512bba title: 使用 @each 遍歷列表中的項目 challengeType: 0 forumTopicId: 301461 dashedName: use-each-to-map-over-items-in-a-list --- # --description-- 上一個挑戰顯示了 `@for` 指令如何通過起始值和結束值循環一定次數。 Sass 還提供 `@each` 指令,該指令循環遍歷列表或映射中的每個項目。 在每次迭代時,變量將從列表或映射分配給當前值。 ```scss @each $color in blue, red, green { .#{$color}-text {color: $color;} } ``` map 的語法略有不同。 這是一個示例: ```scss $colors: (color1: blue, color2: red, color3: green); @each $key, $color in $colors { .#{$color}-text {color: $color;} } ``` 請注意,需要用 `$key` 變量來引用 map 中的鍵。 否則,編譯後的 CSS 將包含 `color1`,`color2`...... 以上兩個代碼示例都轉換爲以下 CSS: ```scss .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` 指令。 ```js assert(code.match(/@each /g)); ``` `.blue-bg` class 的 `background-color` 應爲藍色。 ```js assert($('.blue-bg').css('background-color') == 'rgb(0, 0, 255)'); ``` `.black-bg` class 的 `background-color` 應爲黑色。 ```js assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)'); ``` `.red-bg` class 的 `background-color` 應爲紅色。 ```js assert($('.red-bg').css('background-color') == 'rgb(255, 0, 0)'); ``` # --seed-- ## --seed-contents-- ```html
``` # --solutions-- ```html ``` --- ```html ```