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

# 🏅 5/31 (二) 每日切版任務 - SCSS / Sass 練習
## 題目

請同學嘗試建立一個 @mixin 來實現傳入兩個變數 $size 跟 $bgColor
做出背景色為 $bgColor 的 $size 寬高大小的圓形，
且圓形中要練習插入一個 font-awesome 的任意 icon，
該 icon 的行高是 $size 的大小 font-size 是 $size 的一半，
寫完 @mixin 後請在 HTML 區塊中建立四個圓形，
分別擁有四種不同的 size、bgColor、icon

完成圖如下(稍微調了下間距比較美麗)：

補充：
1. 記得引入 font-awesome 到 CSS 中
2. CSS 區塊記得改成 SCSS/Sass 格式

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

## 回報流程

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


<!-- 解答： -->

回報區
---

<!-- 1. yunyun
Codepen：https://codepen.io/yun_yunni/pen/BaYrdQK
-->

<!-- 2. Chi
Codepen: https://codepen.io/YoChi84/pen/ExQEvgp
-->

<!-- 3. CloThEs
Codepen: https://codepen.io/bogwdnxx-the-sans/pen/rNJdzWd
-->

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

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

<!-- 6. yuyu#6310
Codepen:https://codepen.io/yuyu0905/pen/ExQEvJJ
-->

<!-- 7. su#7798
codepen: https://codepen.io/wc-su/pen/dydmzaP
-->

<!-- 8. 阿基基
https://codepen.io/JIJI_GNI/pen/vYdRJqG
-->

<!-- 9. Hao#2485
https://codepen.io/hao216/pen/oNEEGgL
-->

<!-- 10. 楓之聲#6945
https://codepen.io/sshane258/pen/rNJdGvB
-->

<!-- 11.IreneLee
codepen:https://codepen.io/ntjtcxpt-the-animator/pen/NWyYaOE
-->

<!-- 12. Tuhacrt#0008
Codepen :https://codepen.io/Tuhacrt/pen/vYdReVe
-->

<!-- 13. EllieLo#9809
Codepen :https://codepen.io/ellie-lo/pen/LYQdzWG
-->

<!-- 14. Noy
https://codepen.io/MochiCodingPen/pen/eYVMePW
-->

<!-- 15. RJRS#9430
https://codepen.io/RJRS/pen/wvympzG
-->

<!-- 16. Peng
https://codepen.io/peng-027/pen/oNEqpeO
-->

<!-- 17.Joyce
https://codepen.io/joycehuang/pen/wvympKM?editors=1100
-->

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

<!-- 19. Pearlie#3536
https://codepen.io/PPcode/pen/xxYWYKv
-->

<!-- 20. Chaoci#2460
Codepen:
https://codepen.io/gmailchao/pen/JjpLpjP
-->

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

<!-- 22. 雷雷#7844
Codepen:
https://codepen.io/lei-yi-jie/pen/poaLKeQ
-->

<!-- 23. 黑松胖$4836
https://codepen.io/yi-chien-hsieh/pen/ZErxMZM?editors=1100
-->

<!-- 24. Arista
https://codepen.io/arista-hsieh/pen/mdXxQmG
-->

<!-- 25. Lina Chen
https://codepen.io/LinaChen/pen/jOZzegR
-->

<!-- 26. LHchien
https://codepen.io/lin_chien/pen/jOZzXqV
-->

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

<!-- 28. Ryan Lu#3642
https://codepen.io/ryanlu1125/pen/PoQRvOJ?editors=1100
-->

<!-- 29. Cheng-Yu#1813
https://codepen.io/ball77111/pen/OJQZyKK
-->

<!-- 30. Erica Chen#6929
https://codepen.io/ericachen/pen/BaYxjYK
-->

<!-- 31. Greta#0837
https://codepen.io/gretali/pen/dydeXzJ
-->

<!-- 32. hw#0715
https://codepen.io/Lhwei/pen/abqGZRy
-->

<!-- 33. Knn#0492
https://codepen.io/Knn_84/pen/ExQLgmL
-->

<!-- 33. Charlotte Lee
https://codepen.io/charlotte-lee/pen/MWQGjem?editors=1100
-->

<!-- 34. lyle#8123
https://codepen.io/tomys/pen/PoQepKw
-->

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

<!-- 36. JackC
https://codepen.io/key0329/pen/oNEdrvz
-->

<!-- 37. Mitour#0627
https://codepen.io/mitour/pen/qBxYevg
-->

<!-- 38. hsiuhsiu
https://codepen.io/hsiuhsiu/pen/YzevZWO?editors=1100
-->

<!-- 38. skypassion5000#4151
https://codepen.io/skypassion5000/pen/jOZKKML?editors=1100
-->

<!-- 39. 白狐
Codepen：https://codepen.io/baihu7851/pen/RwQJYqm
-->

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

<!-- 41. Vera#5592
Codepen:https://codepen.io/skvera/pen/JjpBYab
-->

<!-- 42. Cynthia1111
Codepen:https://codepen.io/Cynthia1111/pen/oNEMBez?editors=1100
-->

<!-- 43. Stanley
Codepen:https://codepen.io/sean_1215/pen/JjpBLxR
-->

<!-- 44. Jumpye#8601
Codepen:https://codepen.io/Jumpye/pen/qBxMppX?editors=1100
-->

<!-- 44. 鉦勝 #8333
Codepen:https://codepen.io/atckmax823/pen/NWyEPKy
-->

<!-- 45. J_u_d_y#5993
https://codepen.io/J_u_d_y/pen/PoQvxjR?editors=1100
-->

<!-- 46. andersonshen#4675
Codepen :https://codepen.io/luxyenni-the-bold/pen/KKQjzxo
-->