---
# System prepended metadata

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

---

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