---
# System prepended metadata

title: "\U0001F3C5 5/23 (一) 每日切版任務 - color 練習"
tags: [公益程式體驗營 - 2022]

---

---
tags: 公益程式體驗營 - 2022
---

#  🏅 5/23 (一) 每日切版任務 - color 練習
## 題目 

請自行建立 Codepen 使用 SCSS 中的顏色加亮(lighten)、加深(darken)方法，
做出以色碼 #008899 為主的 1~9 階色階。

方向參考：
首先寫一個 container 來放九個色階，
這邊給 container 加上 flex 讓色階由左至右排列。
然後刻出九個 div ，每個 div 的寬高都為 100px 
第五個 div 背景顏色為正常的 #008899
第五個往左是顏色漸亮的背景色(每次都跟上個 #008899 差 10%)，
第五個往右是顏色漸深背景色(每次都跟上個 #008899 差 10%)。

附上完成圖如下：
![](https://i.imgur.com/fabSMc8.png)


補充：
- 記得把 CSS 區塊改成 SCSS 或 Sass 格式
- 想延伸練習可嘗試做出響應式效果 比如加點 flex-wrap 之類的




<!--
ans:
[color](https://codepen.io/DoLucky/pen/gOvWXjK?editors=1100)
-->
---

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：  -->

回報區
---
<!-- 1. yunyun
Codepen: https://codepen.io/yun_yunni/pen/ZErJrXX
-->

<!-- 2. Bruno Yu
Codepen: https://codepen.io/bruno-yu/pen/BaYdYwN?editors=1100
-->

<!-- 3. Yawway
Codepen: https://codepen.io/yawwoei/pen/Jjpypra?editors=1100
-->

<!-- 4. Rex Chu
Codepen: https://codepen.io/rex_chu/pen/mdXMXxb
-->

<!--  5. Stanley#3825
Codepen: https://codepen.io/sean_1215/pen/VwQzQGO
-->

<!-- 6. StellaHsu#2687
Codepen: https://codepen.io/stella950114/pen/Jjpypew?editors=1100
 -->
 
 <!-- 7. Jason Chen
Codepen: https://codepen.io/jason60810/pen/LYQjQga
 -->
 
 <!-- 8. hsiuhsiu
Codepen: https://codepen.io/hsiuhsiu/pen/OJQjQdN?editors=1100
 -->
 
 <!-- 9. yuyu#6310
Codepen: https://codepen.io/yuyu0905/pen/mdXMxPP?editors=1100
 -->
 
  <!-- 9. CloThEs
Codepen: https://codepen.io/bogwdnxx-the-sans/pen/jOZLzBz
 -->
 
<!-- 11. 楓之聲#6945
Codepen: https://codepen.io/sshane258/pen/RwQZMZG  
-->

<!-- 12. Peng
https://codepen.io/peng-027/pen/WNMEzKy
 -->
 
 <!-- 13. RJRS#9430
https://codepen.io/RJRS/pen/XWZaEYL
 -->
 
<!-- 14. Mitour#0672
  https://codepen.io/mitour/pen/poarLZQ
-->

<!-- 15. Noy
https://codepen.io/MochiCodingPen/pen/KKQvorr
-->

<!-- 16. LHchien
https://codepen.io/lin_chien/pen/qBxXoJO?editors=1100 
-->

<!-- 17. hw#0715
https://codepen.io/Lhwei/pen/yLvoKvR 
-->

<!-- 18. Cheng-Yu#1813
https://codepen.io/ball77111/pen/GRQvdqx?editors=1100
-->

<!-- 19. Tuhacrt#0008
Codepen: https://codepen.io/Tuhacrt/pen/PoQKeoR
-->

<!-- 20. Bao#4997
Codepen: https://codepen.io/baoh/pen/abqyYxO
-->

<!-- 22. Cliff
https://codepen.io/Cliff_hex/pen/XWZaqRX 
-->

<!-- 23.小不點#1793
Codepen:https://codepen.io/fwmfmgkx-the-flexboxer/pen/LYQjmOj
--
>

<!-- 24. Aaron803
Codepen : https://codepen.io/narrowd4c/pen/JjpyvZJ
-->

<!-- 25. #EVC1876
Codepen: https://codepen.io/elvi-chuang/pen/RwQZyBB?editors=1100
 -->
 
<!-- 26. Chi
Codepen: https://codepen.io/YoChi84/pen/eYVErqg  
-->

<!-- 27. han#9437
Codepen: https://codepen.io/qnrxylcw-the-reactor/pen/NWyvzdG 
-->

<!-- 28.IreneLee
codepen:https://codepen.io/ntjtcxpt-the-animator/pen/dydzKgL 
-->

<!-- 29. andersonshen#4675
codepen:https://codepen.io/luxyenni-the-bold/pen/wvyqXYW
-->

<!-- 30. Hao#2485
https://codepen.io/hao216/pen/KKQvebv
-->

<!-- 31. Jamie
https://codepen.io/Wu220103/pen/QWQMrXw -->

<!-- 32.Joyce
https://codepen.io/joycehuang/pen/LYQjrgq --> 

<!-- 33.Chaoci#2460
Codepen:https://codepen.io/gmailchao/pen/NWyvMWO
-->
<!-- 34. ㄚ華
codepen: https://codepen.io/jzkonzat-the-typescripter/pen/NWyvzrq
-->

<!-- 35. Muse#9741
codepen: https://codepen.io/mu24/pen/ZErJjGR
-->

<!-- 36. Kiwi#9804
codepen: https://codepen.io/kiwi1113/pen/NWyvBba
-->

<!-- 37. Leo Song
codepen:
https://codepen.io/sunnylaba/pen/WNMEKmK?editors=1100
-->

<!-- 38. 雷雷#7844
codepen:
https://codepen.io/lei-yi-jie/pen/ExQveRZ
-->

<!--39. JustinLin
Codepen: https://codepen.io/justin0227/pen/OJQjodq?editors=1100
-->

<!--40. bonnieli1414#4906
Codepen: https://codepen.io/bonnieli1414/pen/zYRdJvG?editors=1100
-->

<!--41. How#5806
Codepen: https://codepen.io/howtobefine/pen/BaYdqag
-->

<!--42. lyle#8123
Codepen: https://codepen.io/tomys/pen/rNJzqYY
-->

<!--43. Greta#0837
Codepen: https://codepen.io/gretali/pen/LYQjgJq
-->

<!-- 38. Josh Chen#4552
codepen:
https://codepen.io/hiphop825/pen/mdXMQye?editors=1100
-->

<!-- 45. RyanLu#3642
codepen:
https://codepen.io/ryanlu1125/pen/OJQjaWp?editors=1100
-->

<!-- 46. RayChen#6088
codepen:
https://codepen.io/raychen1996/pen/VwQzqod
-->

<!-- 47. Arista
codepen:
https://codepen.io/arista-hsieh/pen/WNMEPYR
-->

<!--48. 黑松胖#4836
CodePen:https://codepen.io/yi-chien-hsieh/pen/XWZaOGY?editors=1100
-->

<!--49. Knn#0496
CodePen:https://codepen.io/Knn_84/pen/OJQjqQg
-->

<!--49. Katie
CodePen:https://codepen.io/Katie24/pen/LYQjMve
-->

<!--49. WilliamChou#7375
CodePen:https://codepen.io/williampo78/pen/PoQKgNR
-->

<!--50. Charlotte Lee
CodePen:https://codepen.io/charlotte-lee/pen/RwQZmbe?editors=1100
-->

<!--51. Easton#3863
Codepen: https://codepen.io/EastonIsCodingNow/pen/ZErJNyy
-->

<!--51. weihsin#5643
Codepen: https://codepen.io/weisin/pen/PoQKvrZ?editors=1100
-->

<!-- 53.阿基基
 https://codepen.io/JIJI_GNI/pen/zYRdWZb
-->


<!-- Nat#5891
https://codepen.io/dxnqcnen/pen/jOZLjJv -->

<!-- 55.amy芳#1385
 https://codepen.io/amy-chieng/pen/PoQKrME
-->

<!-- 56.Lemon
https://codepen.io/shumhoyin/pen/mdXMNgz
-->

<!-- 57. J_u_d_y#5993
https://codepen.io/J_u_d_y/pen/rNJGBvp
-->

<!-- 58. Raymond Lam#0344
https://codepen.io/manshun-lam/pen/OJQxLZP
-->

<!-- 59. 5757#yen
https://codepen.io/TZU-HUANG-YEN/pen/abqLzrw -->

<!-- 60. Jean
https://codepen.io/jean-liu/pen/WNMZGJW
-->

<!-- 61. Vera#5592
https://codepen.io/skvera/pen/jOZGBwJ
-->

<!-- 62. Chaco#2993
https://codepen.io/chaco-wang/pen/xxYXrxQ
-->

<!-- 62. Cynthia1111
https://codepen.io/Cynthia1111/pen/xxYXrNx?editors=1100
-->

<!-- 63. 眠瀾#8857
CodePen: https://codepen.io/laron9486/pen/dydVzqV
-->

<!-- 64. ajhappy#6488
Codepen:https://codepen.io/ajhappy5438/pen/poaWdJW
-->

<!-- 65.yuling
https://codepen.io/igzdflpu/pen/bGLoYza
-->

<!-- 66.花禮湖燒#7359
https://codepen.io/lai-pei/pen/vYdepap
-->
<!-- 66.鉦勝#8333
https://codepen.io/atckmax823/pen/BaYwJMv?editors=1100
-->

<!-- 67.Vicky Chang#8846
Codepen:
https://codepen.io/cychang/pen/wvyryXa?editors=1100
-->

<!-- 68.Ayre#0016
codepen:https://codepen.io/yichunlin09/pen/xxYXWOm?editors=1100
-->

<!-- 69. Carrie#2750
codepen:https://codepen.io/carrie-wang/pen/ZErXxRq
-->

<!-- 70. deveryone#8090
https://codepen.io/raycheng/pen/GRQMxGN
-->

<!-- 71. Lina Chen
Codepen: https://codepen.io/LinaChen/pen/qBxXzzb
-->

<!-- 72. 隔壁小王
https://codepen.io/stevetanus/pen/eYVGjrP
-->

<!-- 73. xuan#0808
https://codepen.io/xuan0915/pen/MWQEvxa?editors=1100
-->

<!-- 74. 小天#7177
https://codepen.io/linyujing/pen/oNEoYZE?editors=1100
-->

<!-- 75. SASIMI#5099
Codepen:
https://codepen.io/sashimi1327/pen/MWQOZyP
-->

<!-- 76. JackC
Codepen: https://codepen.io/key0329/pen/qBxVLxb 
-->

<!-- 77. shujhen#7734
Codepen：https://codepen.io/shujhen/pen/ZErXaqm
-->

<!-- 77. JessieCho
Codepen：https://codepen.io/jessieCho/pen/QWQOoMp
-->

<!-- 78. Tori#1287
Codepen：https://codepen.io/FlyTori/pen/bGLYZZW
-->

<!-- 79. skypassion5000#4151
Codepen：https://codepen.io/skypassion5000/pen/NWyXYrG?editors=1100
-->

<!-- 80. mei#8421
Codepen：https://codepen.io/Shila-Chen/pen/rNJpZBr
-->

Codepen: https://codepen.io/Adif/pen/NWyXdEp?editors=1100


<!-- 81. danny123
codepen: https://codepen.io/binlandz123/pen/jOZZNNQ
-->

<!--82.家洋#6999
codepen:https://codepen.io/yang940648/pen/abqqbby?editors=0100
-->

<!-- 83. muzz#0345
 https://codepen.io/yunnnz/pen/jOZZPbX-->
 
<!-- 84. 白狐
Codepen: https://codepen.io/baihu7851/pen/QWQMPKY
-->

<!-- 85. Erica Chen#6929
Codepen: https://codepen.io/ericachen/pen/bGLvoNY
-->

<!-- 86. ling chang#1024
Codepen: https://codepen.io/ling-chang/pen/WNMzdQG
-->

<!-- 87. color#4378
Codepen:https://codepen.io/color0602/pen/BaYxLOz
-->

<!-- 88. Arvin#6347
Codepen:https://codepen.io/family929317/pen/RwQybPR
-->

<!-- 89. Yurii#7455
Codepen:https://codepen.io/Yurii-Wen/pen/qBxyaEj?editors=1100
-->

<!-- 90. Jumpye#8601
Codepen:https://codepen.io/Jumpye/pen/GRQXWxY?editors=1100
-->
<!-- 91. 鉦勝 #8333
Codepen:https://codepen.io/Jumpye/pen/GRQXWxY?editors=1100
-->

<!--92. zera#6060
codepen : https://codepen.io/zera-tseng/pen/OJQGXxr
-->

<!--93. 黑白兔#0684
codepen : https://codepen.io/zera-tseng/pen/OJQGXxr
-->
