---
tags: 網頁切版直播班 - 2021 夏季班
---
# 7/29(四) 每日任務

## 題目

只需更換 SCSS 內「...」成程式碼，利用 mixin 搭配 include 的方法讓上方的 CSS 換一個寫法，省去重複寫 @media 的問題

CSS

.header{
  width: 500px;
}

@media(max-width: 768px){
  .header{
	width: 13px;
	font-size: 20px;
  }
}

@media(max-width: 568px){
  .header{
	font-size: 8px;
  }
}

.header a{
  background: black;
}

@media(max-width: 568px){
  .header a{
	background: white;
  }
}

### SCSS

@mixin pad{
  @media(max-width: 768px){
	@content;
  }
}

@mixin mobile{
  @media(max-width: 568px){
	@content;
  }
}

.header{
  ...
  
  a{
     ...
  }
}

## 回報流程
1. 將答案寫在 Codepen 並複製 Codepen 連結貼至「回報區」中回報就算完成了喔～
解答及回報方式請參考下方


<!-- 解答：[Codepen 解答](https://codepen.io/AliceChiang/pen/YzWvBXM) -->

回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
Codepen：https://codepen.io/Bingbingboom/pen/MWpVQxo
-->

<!-- 1. 焦糖
Codepen：https://codepen.io/yen-kg/pen/XWMypEm
-->

<!-- 2. Jameskrauser
Codepen: https://codepen.io/jameskrauser/pen/WNjMMjM?editors=0100
-->
<!-- 3. lumei
Codepen:
https://codepen.io/l_umei/pen/GRmQVvb
-->

<!-- 4. Jasmin
Codepen：https://codepen.io/thejasmin/pen/vYxyPwg
-->

<!--5.Alpha
Codepen:https://codepen.io/alphatero/pen/MWmVEbV
-->

<!-- 6.肉鬆
codepen: https://codepen.io/klrkicog/pen/oNWqGYK?editors=0100
-->

<!-- 7. LiShang
Codepen：https://codepen.io/li-shang/pen/rNmdGjZ
-->

<!-- 8. 雷古娜
codepen:https://codepen.io/tinahopo/pen/VwbXMzY -->

<!--9.陳sam
codepen:https://codepen.io/euldpliv/pen/MWmVErB
-->

<!--10.WilsonHan
codepen:https://codepen.io/wi0821/pen/yLbKzEq
-->

<!--11.Lina Chen
codepen: https://codepen.io/LinaChen/pen/PomRJap
-->

<!-- 12.Sam li
codepen:https://codepen.io/sam830623/pen/poPLWVK
-->

<!-- 13.Jean
codepen:https://codepen.io/jean-liu/pen/YzVarBW
-->

<!-- 14. KK
codepen:https://codepen.io/potatokaka/pen/OJmvxYx?editors=0100
-->

<!-- 15.大衛
codepen:https://codepen.io/exnsrpjc/pen/RwVMjRZ?editors=1100
-->

<!-- 16. Gui
https://codepen.io/guitimliu/pen/wvdmPzX -->

<!-- 17. Sz
codepen: https://codepen.io/szyln/pen/vYmRWKZ
-->

<!-- 18. Fleur
codepen: https://codepen.io/swwlee/pen/OJmjqLL
-->

<!-- 19. Dory
codepen: https://codepen.io/dorihung/pen/PomRORB
-->

<!-- 20. Irene Wang
codepen: https://codepen.io/irene-wang-the-looper/pen/KKmoyRj
-->

<!-- 21.Jun Chan
codepen:https://codepen.io/chujunchan/pen/OJmvOEo
-->

<!-- 22. huanan
codepen:https://codepen.io/hua_nan/pen/KKmoyEP
-->

<!-- 23. Gill
codepen:https://codepen.io/Gill-Chin/pen/QWvmOPe
-->

<!-- 23. YuriT
codepen:https://codepen.io/wenfisht/pen/xxdWPRZ
-->

<!-- 24. Joy Cheng
codepen https://codepen.io/joycheng5432/pen/JjNLMKM
-->

<!-- 25. peter.chen
codepen:https://codepen.io/JIAN-RONG/pen/mdmxpMo?editors=0100
-->

<!-- 26. Cate Chang
codepen:https://codepen.io/tutz/pen/abWYEEq
-->

<!--27. yijun
codepen:https://codepen.io/sandy3068/pen/oNWqEPX
-->

<!-- 28.阿瓜
https://codepen.io/hoick/pen/rNmdJQR?editors=1100 -->

<!-- 29.curry
https://codepen.io/Ted19851223/pen/jOmzZdK -->

<!-- 30. ZOE WU
https://codepen.io/Zoechiueh/pen/gOWeveL?editors=0100
-->
<!-- 31. 群嘉
https://codepen.io/efzdamnp-the-lessful/pen/oNWqEVj?editors=0100
-->

<!-- 32.axlrock1021
https://codepen.io/andy1021/pen/MWmVVQg
-->

<!-- 33. 蔡明達
Codepen: https://codepen.io/bmzpfyxe/pen/bGWNwNZ?editors=0100
-->
<!-- -->
<!-- 34. anna
Codepen: https://codepen.io/annhys/pen/WNjzyjE?editors=0100
-->

<!-- 35. Xing
codepen: https://codepen.io/xing10/pen/poPLKpL?editors=0100
-->

<!-- 36. hellocrab
https://codepen.io/hellocrab/pen/yLbKxee
-->

<!-- 37. Tina Yen
codepen:https://codepen.io/tlorfrnl-the-typescripter/pen/bGWvmMr
-->

<!-- 38. Hi Annie
https://codepen.io/lhohdalu/pen/MWmVZpj
-->

<!-- 39.黃士桓
https://codepen.io/shr-huan-huang/pen/yLbKZpj?editors=0100
-->

<!--40. Cheng Pei-hsuan
codepen: https://codepen.io/PaCheng/pen/poPLjoG
-->

<!--41. Jocelyn
codepen: https://codepen.io/enjoyful/pen/OJmvdam?editors=0110-->

<!--42.童筱涵
codepen:https://codepen.io/hsiaohan/pen/LYydaNN?editors=1100
-->

<!--42. Alberto
https://codepen.io/AlbertoLL/pen/BaRreNK
-->

<!-- 43. 沈依蓉
https://codepen.io/lily-oa/pen/abWYeoJ
-->

<!-- 44. RitaHuang
https://codepen.io/Rita-Rossweisse/pen/ExmLVNx?editors=0100
-->

<!-- 45. natsu
Codepan： https://codepen.io/natsu19/pen/OJmZMpG
-->

<!-- 46. Oober
Codepan： https://codepen.io/xtsjrjdv/pen/OJmZRWq
-->

<!-- 47. Meng
Codepan： https://codepen.io/MGHN/pen/GRmExgg
-->

<!-- 48. Una
Codepan： https://codepen.io/xbsapbas-the-vuer/pen/ZEKoBYX?editors=0110
-->

<!--49. 阿和
codepen: https://codepen.io/shnny/pen/zYwjNMr?editors=0100
-->

<!-- 50 佳文
https://codepen.io/chiawen81/pen/PomeppV?editors=0100
-->

<!-- 51 Katie Zhao
https://codepen.io/katiezhao/pen/xxdjrBE
-->

<!-- 52 Benson
https://codepen.io/polarBear712/pen/bGWMoee
-->

<!-- 53. Sylvia-H https://codepen.io/Cosmosheart/pen/gOWzXeo?editors=0100 -->

<!-- 54. irene
CodePen：https://codepen.io/lohas1107/pen/PomexYp?editors=0100
-->

<!-- 55. SihLe Huang
code: https://codepen.io/bugbug777/pen/RwVydGo
-->

<!--56. Elaine Liu
https://codepen.io/elaine7598/pen/PomaNWo?editors=1100
-->
<!--57. Shani
https://codepen.io/ShaniMa/pen/mdmKrWK -->

<!--58. Jim Hwang
https://codepen.io/jimh1129/pen/LYyrROz?editors=0100 -->

<!--59. Tori
CodePen： https://codepen.io/hayen/pen/VwbdPXK?editors=0100
-->

<!--60. Jamie
CodePen： https://codepen.io/JamieChenWs/pen/MWmXxPL
-->

<!--60. jimmyFang
CodePen： https://codepen.io/pohxiqqo/pen/bGWKJXX
-->

<!-- 61. 三隻小貓
https://codepen.io/bagelover/pen/RwVBNZQ?editors=0100 -->

<!-- 62. Jessie Cheng
https://codepen.io/JessieMosbi/pen/ZEKjjqm
-->

<!-- 63. ellie
https://codepen.io/hsu-yu/pen/vYmavoj
-->

<!-- 64. Una(點子數位)
https://codepen.io/xbsapbas-the-vuer/pen/ZEKMWKp?editors=0110
-->

<!-- 64. WA
https://codepen.io/ldddl/pen/BaROPyN
-->

<!-- 65. AKI
https://codepen.io/akichen27/pen/OJmoomO
-->

<!-- 66. 袁祥恩
https://codepen.io/ovfxsavp-the-bashful/pen/rNmZZYX
-->

<!-- 67. Min Chun Tsai
https://codepen.io/Tsai0926/pen/PomxYvV
-->

<!-- 68.Page
https://codepen.io/kanawin821/pen/YzVRwgp
-->

<!-- 69.Erin Huang
https://codepen.io/ErinHuang/pen/JjNebVy
-->

<!-- 70.ted31539
https://codepen.io/Ted31539/pen/MWmzzLv
-->

<!-- 71. Ruby Chiang
Codepen: https://codepen.io/rubyyl0701/pen/ZEKmNKd
-->

<!-- 72.陳品宏
https://codepen.io/wtka/pen/ExmGEXm
-->

<!-- 73. shanglin
https://codepen.io/rmovuagr-the-selector/pen/QWvzYdx
-->

<!-- 74. YOYO
https://codepen.io/lumedkle/pen/jOmRQMp?editors=0110
-->

<!-- 75. Joe Kuo
https://codepen.io/alertislow/pen/VwbOBNP
-->