---
tags: 大學生體驗營 - 2021 夏季班
---
# 7/20(二) 每日任務

## 題目

只需更換 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. 小羊
Codepen：
https://codepen.io/eqsmebaz-the-selector/pen/JjNyPNO
-->

<!-- 3. 羿宣
Codepen：https://codepen.io/Ann828/pen/OJmjLvK?editors=0110 -->

<!-- 4. Jack
Codepen: https://codepen.io/JackChen89/pen/MWmvgqp -->

<!--5.廖奕慈
Codepen: https://codepen.io/yiciLiao/pen/dyWzbjg -->

<!--6.黃彩雲
Codepen: https://codepen.io/corin19/pen/PomKYVY -->

<!-- 7.小胖
Codepen: https://codepen.io/a1073315/pen/VwbzZqq -->

<!-- 8.蕭絜云
Codepen: https://codepen.io/cloudy_77/pen/NWjvWrb -->

<!-- 9. Iris
Codepen: https://codepen.io/hungyen/pen/eYWEYjP
-->

<!-- 10.黃郁芳
Codepen: https://codepen.io/YuFang0323/pen/vYmJYVL -->

<!-- 11. 辰
Codepen: https://codepen.io/dnangelapril/pen/qBmXEWE -->

<!-- 12. JT
Codepen:https://codepen.io/jsht-the-animator/pen/yLboyBR?editors=0100
-->

<!-- 13. 劉子瑜
Codepen:https://codepen.io/superfish195/pen/eYWEmop
-->

<!-- 14. 黃珮雯
Codepen: https://codepen.io/pwh_27/pen/abWyOXY -->

<!-- 15. 陳瑋崗
Codepen: https://codepen.io/weigang-chen/pen/jOmLbyw -->

<!-- 16. 廖仕雅
Codepen: https://codepen.io/sophia0121/pen/VwbzLNg?editors=0100 -->

<!-- 17.Cloudia
Codepen: https://codepen.io/hkps87/pen/ZEKJbwq -->

<!-- 18. 莊承叡
Codepen：https://codepen.io/Ray_ty39/pen/WNjErvJ?editors=0100
-->

<!-- 19. 人中
Codepen：https://codepen.io/renchong2424/pen/wvdqMrX
-->

<!-- 20. Steve
codepen:https://codepen.io/steve5631/pen/vYmJLBX
-->

<!-- 21. 薰
codepen: https://codepen.io/chiaoshin/pen/YzVxqBB -->

<!-- 22. 馮旻
codepen: https://codepen.io/tboqkvhk/pen/abWymKd -->

<!--23. 小松
codepen：https://codepen.io/120061203/pen/XWRaMQX
-->

<!-- 25. 謝旻臻
Codepen: https://codepen.io/julia20010828/pen/RwVZLZY?editors=1100 -->

<!-- 26. Genie
Codepen: https://codepen.io/hcliii/pen/OJmxxLZ -->

<!-- 27. 霈楹
Codepen: https://codepen.io/nrweahgl-the-selector/pen/eYWGQry-->

<!-- 28. 德德
Codepen: https://codepen.io/Chiouder/pen/MWmrzZb -->

<!-- 29. 陳書妤
Codepen: https://codepen.io/shuyu227/pen/MWmXOQZ?editors=0100 -->