---
###### tags: `公益程式體驗營 - 2022` `scss` `程式筆記` `切版`
---

# 每日切版任務筆記

## List 就是陣列，Map 就是物件

題目：[5/23 (一) 每日切版任務 - color 練習](/5fLPm1sgRpG0WdGs_5q9_g)


<div class="flex">
  <div class="box bg-color1"></div>
  <div class="box bg-color2"></div>
  <div class="box bg-color3"></div>
  <div class="box bg-color4"></div>
  <div class="box bg-color5"></div>
  <div class="box bg-color6"></div>
  <div class="box bg-color7"></div>
  <div class="box bg-color8"></div>
  <div class="box bg-color9"></div>
</div>

希望用 `nth-of-type()` 去選，而不用下一堆 `class`

.bg-color{
  &:nth-of-type(1){}
  &:nth-of-type(2){}
  &:nth-of-type(3){}
  &:nth-of-type(4){}
  &:nth-of-type(5){}
  &:nth-of-type(6){}
  &:nth-of-type(7){}
  &:nth-of-type(8){}
  &:nth-of-type(9){}
}

忠孝東路走 9 遍，啊我不想寫9遍 `nth-of-type()`，所以 `n` 希望用迴圈去帶

> 注意迴圈裡面記得加上 `#{}`——by 除錯到囧的我

@for $i from 1 through 9 {
  .bg-color:nth-of-type(#{$i}){}
}

既然都用迴圈了所以裡面依樣畫葫蘆，搭配 SCSS 的 Map，Map 看作是物件就好囉

:::info
我原先取名是 `cyan-100` ~ `cyan-900`，但是迴圈裡面沒辦法 `cyan-#{$i}00`，看不懂後面的 `00`，至少我是沒試出來，所以改了命名方式
:::

/* 基準色放在外面宣告 */
$cyan-5: #008899;

$primaryColor: (
  cyan-1: lighten($cyan-5, 40%),
  cyan-2: lighten($cyan-5, 30%),
  cyan-3: lighten($cyan-5, 20%),
  cyan-4: lighten($cyan-5, 10%),
  cyan-5: lighten($cyan-5, 0%),
  cyan-6: darken($cyan-5, 10%),
  cyan-7: darken($cyan-5, 20%),
  cyan-8: darken($cyan-5, 30%),
  cyan-9: darken($cyan-5, 40%)
);

Map 需要透過 `map-get(變數, 鍵名)` 取得資料

@for $i from 1 through 9 {
  .bg-color:nth-of-type(#{$i}){
    background-color: map-get($primaryColor, cyan-#{$i});
  }
}

最後迴圈裡的 max 值，也可以用 length() 去帶

@for $i from 1 through length($primaryColor) {
  ...
}

最終程式碼：[5/23 (一) 每日切版任務 - color 練習](https://codepen.io/mitour/pen/poarLZQ)

### ref

* [30天掌握Sass語法 - (29) @for+random()創造無限可能](https://ithelp.ithome.com.tw/articles/10137464#:~:text=%40for%20%24i%20from%201%20through%20%24box%2Dlen)
* [Sass 中的陣列（List）、物件（Map）](https://yami.io/sass-list-and-map/#:~:text=%E7%95%8C%E7%9A%84%200%E3%80%82-,Map%20%E2%80%93%20%E7%89%A9%E4%BB%B6,-Map%20%E5%92%8C%20List)