--- tags: 公益程式體驗營 - 2022 --- # 🏅 5/25 (三) 每日切版任務 - SCSS / Sass 練習 ## 題目 這邊要請同學練習使用 Sass 中的連結符號 `&`， 還有練習使用變數搭配加減乘除的方式來減少代碼的重複性， 請同學嘗試將[範例檔案](https://codepen.io/DoLucky/pen/zYRwzyK?editors=1100)中的樣式改寫成 SCSS 或 Sass 的格式， 改寫前與改寫後的畫面需一致，且同學只能修改 CSS 的區塊， 最後將改寫完的 Codepen 連結貼到下方的作業回報區即算完成。 方向參考： 1. 請把樣式修改成 SCSS 或 Sass 格式 2. 盡量多使用 & 連結符號減少重複代碼 3. 嘗試把一些重複的、可找到規律的部分做成變數 4. 記得設定 CSS 區塊為 SCSS 或 Sass <!-- ans: [SCSS / Sass ](https://codepen.io/DoLucky/pen/OJQgBzN?editors=1100) --> --- ## 回報流程 1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報 （也可以將答案直接貼至「回報區」） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答： --> 回報區 --- <!-- 1.Noy https://codepen.io/MochiCodingPen/pen/WNMZqvo --> <!-- 2.yunyun https://codepen.io/yun_yunni/pen/wvyrLxe --> <!-- 3.Bruno Yu https://codepen.io/bruno-yu/pen/JjprQZQ?editors=0100 --> <!-- 4. su#7798 v --> <!-- 5.小不點#1793 Codepen:https://codepen.io/fwmfmgkx-the-flexboxer/pen/PoQJMmE --> <!-- 6.yuyu#6310 Codepen:https://codepen.io/yuyu0905/pen/QWQqeMJ?editors=0100 --> <!-- 7.Chaco#2993 https://codepen.io/chaco-wang/pen/PoQJMee?editors=0100 --> <!-- 8.Jean https://codepen.io/jean-liu/pen/OJQxepX --> <!-- 9. 楓之聲#6945 https://codepen.io/sshane258/pen/RwQjbWB --> <!-- 10. hw#0715 https://codepen.io/Lhwei/pen/ZErazpO --> <!-- 11. Muse#9741 https://codepen.io/mu24/pen/WNMXegr --> <!-- 12.xuan#0808 https://codepen.io/xuan0915/pen/oNEGKaW?editors=1100 --> <!-- 13. hsiuhsiu https://codepen.io/hsiuhsiu/pen/LYQOPem?editors=0100 --> <!-- 14. LHchien https://codepen.io/lin_chien/pen/wvyPwaO --> <!-- 15. Tuhacrt#0008 Codepen: https://codepen.io/Tuhacrt/pen/MWQOWGX?editors=0100 --> <!-- 16.#EVC1876 Codepen: https://codepen.io/elvi-chuang/pen/WNMXbbJ?editors=1100 --> <!-- 17. Peng https://codepen.io/peng-027/pen/QWQOwrY --> <!-- 18. Chi Codepen: https://codepen.io/YoChi84/pen/eYVemza --> <!-- 19. RJRS#9430 Codepen: https://codepen.io/RJRS/pen/WNMXbYP --> <!-- 20. han#9437 Codepen: https://codepen.io/qnrxylcw-the-reactor/pen/LYQOEay --> <!-- 21. Josh Chen#4552 Codepen: https://codepen.io/hiphop825/pen/jOZaORx?editors=1100 --> <!-- 22. andersonshen#4675 Codepen: https://codepen.io/luxyenni-the-bold/pen/qBxVEQR --> <!-- 23. Stanley Codepen: https://codepen.io/sean_1215/pen/MWQOgoj --> <!-- 24. Greta#0837 Codepen: https://codepen.io/gretali/pen/ZEraYqE --> <!-- 25. How#5806 Codepen: https://codepen.io/howtobefine/pen/oNEoXma --> <!-- 26. Chaoci#2460 Codepen: https://codepen.io/gmailchao/pen/mdXqJzg --> <!-- 27. Cliff https://codepen.io/Cliff_hex/pen/ZEraGBO --> <!-- 28. Cheng-Yu#1813 https://codepen.io/ball77111/pen/JjpOGJG --> <!-- 29. Hao#2485 https://codepen.io/hao216/pen/oNEojLV --> <!-- 30. 眠瀾#8857 CodePen: https://codepen.io/laron9486/pen/mdXqePd --> <!-- 30\1. lyle#8123 CodePen: https://codepen.io/tomys/pen/eYVeJwp --> <!-- 32. ajhappy#6488 Codepen:https://codepen.io/ajhappy5438/pen/gOvXPQz?editors=1100 --> <!-- 33. 雷雷#7844 https://codepen.io/lei-yi-jie/pen/vYdWGwM?editors=1100 --> <!-- 34. 花禮湖燒#7359 https://codepen.io/lai-pei/pen/OJQORpz?editors=1100 --> <!-- 35. Arista https://codepen.io/arista-hsieh/pen/OJQObgG --> <!-- 35. 鉦勝 https://codepen.io/atckmax823/pen/abqVBzp?editors=1100 --> <!--36. 黑松胖#4836 https://codepen.io/yi-chien-hsieh/pen/ZEraOyx?editors=1100 --> <!-- 37.Joyce https://codepen.io/joycehuang/pen/qBxVamb?editors=1100 --> <!-- 38. 小天#7177 https://codepen.io/linyujing/pen/QWQOdPQ?editors=0110 --> <!-- 39. Ayre#0016 codepen:https://codepen.io/yichunlin09/pen/ZEraeRg?editors=1100 --> <!-- 40. bonnieli1414#4906 codepen:https://codepen.io/bonnieli1414/pen/JjpONVZ?editors=0100 --> <!-- 41. SASIMI#5099 codepen: https://codepen.io/sashimi1327/pen/PoQOKpJ --> <!-- 42. shujhen#7734 Codepen：https://codepen.io/shujhen/pen/dydZWbV --> <!-- 43. Ryan Lu#3642 Codepen：https://codepen.io/ryanlu1125/pen/mdXqxMy?editors=0100 --> <!-- 44. Knn#0492 Codepen：https://codepen.io/Knn_84/pen/PoQOaXr --> <!-- 45. Mitour#0672 https://codepen.io/mitour/pen/OJQOomO --> <!-- 46. JessieCho https://codepen.io/jessieCho/pen/oNEoOxX --> <!-- 47. deveryone#8090 https://codepen.io/raycheng/pen/poadYPw?editors=1100 --> <!-- 47. Tori https://codepen.io/FlyTori/pen/VwQywXJ?editors=1100 --> <!-- 48. J_u_d_y#5993 https://codepen.io/J_u_d_y/pen/ExQoaaM?editors=1100 --> Codepen:https://codepen.io/Adif/pen/OJQzWKb?editors=1100 <!-- 50. JackC Codepen:https://codepen.io/key0329/pen/VwQybJG --> <!-- 51. Charlotte Lee Codepen:https://codepen.io/charlotte-lee/pen/QWQaaGQ?editors=0100 --> <!-- 52. Katie Codepen:https://codepen.io/Katie24/pen/WNMdjVv --> <!-- 53. skypassion5000#4151 Codepen:https://codepen.io/skypassion5000/pen/BaYJVME?editors=0100 --> <!-- 54. mei#8421 Codepen:https://codepen.io/Shila-Chen/pen/QWQaVda?editors=1100 --> <!-- 55. Pearlie#3536 https://codepen.io/PPcode/pen/KKQZBOy --> <!-- 56. Vicky Chang#8846 Codepen: https://codepen.io/cychang/pen/bGLaPXg?editors=1100 --> <!-- 57. Lina Chen Codepen:https://codepen.io/LinaChen/pen/YzeExXW --> <!-- 58. danny123 codepen: https://codepen.io/binlandz123/pen/yLvvBMm?editors=0100 --> <!-- 59. Vera#5592 codepen: https://codepen.io/skvera/pen/ZErvmqv --> <!-- 60. Erica Chen#6929 codepen: https://codepen.io/ericachen/pen/QWQmOLR?editors=1100 --> <!-- 61. Arvin#6347 codepen: https://codepen.io/family929317/pen/gOveVgO --> <!-- 62. CloThEs codepen: https://codepen.io/bogwdnxx-the-sans/pen/qBxoXXv --> <!-- 63. ling chang#1024 codepen: https://codepen.io/ling-chang/pen/rNJKvXd?editors=1100 --> <!-- 64. 白狐 Codepen：https://codepen.io/baihu7851/pen/NWyzzVY --> <!-- 65. Cynthia1111 Codepen：https://codepen.io/Cynthia1111/pen/poadEJO?editors=1100 --> <!-- 66. Jumpye#8601 Codepen：https://codepen.io/Jumpye/pen/eYVLRZQ?editors=1100 --> <!-- 67. Jamie https://codepen.io/Wu220103/pen/PoQOYGV --> <!-- 68. zera#6060 https://codepen.io/zera-tseng/pen/QWQPRpa -->