--- 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 -->