---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 30

## mixin

### 題目

只需更換 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{
     ...
  }
}

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：https://codepen.io/hexschool/pen/qBoNzgq -->

回報區
---

| Discord | CodePen / 答案 |
|:-----------------:|:-------------------------------------------------------------------:|
| Iris Huang#6727 | [CodePen](https://codepen.io/ythuang/pen/rNddzJN) |
| Clara Cai#7097 | [CodePen](https://codepen.io/Clara-Snowy/pen/oNqEQOb) |
| CloThEs#7837 | [CodePen](https://codepen.io/CloThEsZ/pen/eYMMwWV) |
| 布魯諾#7239 | [CodePen](https://codepen.io/bruno-yu/pen/qBooepZ?editors=1100) |
| Chi#7605 | [Codepen](https://codepen.io/YoChi84/pen/KKooOyr) |
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/VwXXorm) |
| Amberhh#2465 | [CodePen](https://codepen.io/Amberhh/pen/zYWWgRY?editors=0100) |
| 小白#2406 | [CodePen](https://codepen.io/gracewhite/pen/zYWWgpY) |
| choubree #4350 | [CodePen](https://codepen.io/BreeChou/pen/PoRRMaQ) |
| Clara#1275 | [CodePen](https://codepen.io/bsupixqu/pen/NWYYQeE) |
| Karol-Kuo#5287 | [CodePen](https://codepen.io/ting-yu-kuo/pen/wvmmVxX) |
| 咻蹦#1526 | [CodePen](https://codepen.io/emmasyu/pen/GRxxVwy) |
| christina#6185 | [Codepen](https://codepen.io/chrisc0210/pen/bGvvXyQ) |
| WEI_RIO#9342 | [Codepen](https://codepen.io/wei_wu/pen/eYMMqwm?editors=0100) |
| bonnieli1414#4906 | [Codepen](https://codepen.io/bonnieli1414/pen/XWEqrWX?editors=0100) |
| 黃士桓#7654 | [codePen](https://codepen.io/shr-huan-huang/pen/ExELYVg) |
| 𝓛𝓊𝒸𝓎#8635 | [Codepen](https://codepen.io/lucygirl/pen/ZExozQb) |
| LinaChen#1796 | [Codepen](https://codepen.io/LinaChen/pen/poLVzgz) |
| JarDar#6980 | [codepen](https://codepen.io/jardarpen/pen/JjLvPbJ) |
| PeggyLiao#1552 | [CodePen](https://codepen.io/PeiJu-Liao/pen/wvmjwzO?editors=1100) |
| Melon#0380 | [CodePen](https://codepen.io/BalaFang/pen/KKoRPvw) |
| Cliff#4606 | [Codepen](https://codepen.io/Cliff_hex/pen/qBooZKK?editors=0100) |
| LHchien33#6232 | [Codepen](https://codepen.io/lin_chien/pen/KKoRPeV) |
| Benson#6763 | [Codepen](https://codepen.io/kumashow/pen/rNdvBqm) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/BarxBqX) |
| Joyce#3790 | [CodePen](https://codepen.io/joycehuang/pen/VwXxZqE?editors=0110) |
| azami#5986 | [CodePen](https://codepen.io/azami/pen/gOezYqJ) |
| JackC#0411 | [CodePen](https://codepen.io/key0329/pen/WNzJeqr) |
| Arista#5802 | [CodePen](https://codepen.io/arista-hsieh/pen/vYRjYBP) |
| 大衛#4869 | [CodePen](https://codepen.io/exnsrpjc/pen/wvmjvva?editors=0110) |
| 洋蔥#5295 | [CodePen](https://codepen.io/HSUNA/pen/rNdvBee?editors=0100) |
| int#7518 | [Codepen](https://codepen.io/intHuang/pen/KKoRKam?editors=0110) |
| 小諾#4866 | [Codepen](https://codepen.io/noichan/pen/PoRRKPK) |
| 威0#6919 | [codepen](https://codepen.io/n0918679182/pen/zYWjYwa?editors=0100) |
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/JjLvojg?editors=0100) |
| yuyu#6310 | [CodePen](https://codepen.io/yuyu0905/pen/VwXxYPj?editors=0100) |
| NeilLin#3009 | [CodePen](https://codepen.io/a0071421/pen/vYRjEyy) |
| L0F0#8733 | [CodePen](https://codepen.io/l0f0/pen/wvmjBmj?editors=0100) |
| zera#6060 | [codepen](https://codepen.io/zera-tseng/pen/NWYMPwz?editors=0110)|
|Fang #4680|[Codepen](https://codepen.io/std95174/pen/bGvMNQx)|
|IreneY #0086|[Codepen](https://codepen.io/HalfPlannedJourney/pen/qBoYdRX)|
|Henry#7386|[Codepen](https://codepen.io/h1nr9/pen/abYGOWW)|
|YI#0863|[Codepen](https://codepen.io/YI0305/pen/oNqdXYo)|
|群嘉#3943|[CodePen](https://codepen.io/efzdamnp-the-lessful/pen/WNzJvgb?editors=0110)|
|QOO#8446|[CodePen](https://codepen.io/QOOQOOQ/pen/WNzJvKb?editors=1100)|
|家洋#6999|[Codepen](https://codepen.io/aa235553756/pen/ExELVNR)|
|雷雷#7844|[Codepen](https://codepen.io/lei-yi-jie/pen/mdxLeze)|
|yu魚#1330 | [CodePen](https://codepen.io/Yu_yu/pen/ExELVJr)|
| suihsilan#9485 | [CodePen](https://codepen.io/suihsilan/pen/bGvMEbr?editors=0110)|
|ssozr#4680|[codepen](https://codepen.io/ssozr/pen/rNdvLrr)|
| Yunei#6323 |[codepen](https://codepen.io/Yunei/pen/eYMrzPK)|
| 我是泇吟 #5189 | [CodePen](https://codepen.io/kljuqbxs/pen/OJvZRym) |
| YU #0618 |[CodePen](https://codepen.io/yoken_/pen/QWmraxV) |
| kevin8349 #6131 |[CodePen](https://codepen.io/kun8349/pen/ZExoxaa) |
| Potatolee#7749 |[CodePen](https://codepen.io/potatoleee/pen/rNdvdPr) |
|艾芮絲#6060|[Codepen](https://codepen.io/wangyingju/pen/WNzJgRM)|
| hungya#0773 |[CodePen](https://codepen.io/hungya777/pen/ZExoMoP?editors=0100) |
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/Yzaxeqw)|
|Vera#5592|[Codepen](https://codepen.io/skvera/pen/OJvZGRp)|
|allen#0876|[Codepen](https://codepen.io/sodarman/pen/wvmXwdQ)
|Sentiments#4883|[codepen](https://codepen.io/Sentiments/pen/qBoKdqR?editors=1100)
|yo_yo#2678|[Codepen](https://codepen.io/johnny329/pen/bGvKeRV)|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/qBoKpVW?editors=0110)|
|Hsiu#8767|[Codepen](https://codepen.io/amy-hsiu/pen/ExEREXo)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/eYMrvrw)|
|紙飛機 #1335|[Codepen](https://codepen.io/paperplanea/pen/WNzymax?editors=1100)|
|Vian#7338|[Codepen](https://codepen.io/vianwu31/pen/JjLBdjd)|
|Cream#3449|[Codepen](https://codepen.io/frxdwbbi-the-sasster/pen/MWVBwoM?editors=0100)|
|Jamie Wu#9345|[Codepen](https://codepen.io/Wu220103/pen/bGvjVrG)|
| 楓之聲#6945 | [Codepen](https://codepen.io/sshane258/pen/PoRBzxY) |
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/PoRBjpL)
|Yuna Huang#2692|[Codepen](https://codepen.io/Yuna1002/pen/JjLBJJM)|
|鉦勝 #8333|[Codepen](https://codepen.io/atckmax823/pen/WNzKgex?editors=0110)|
|Tori #1248|[Codepen](https://codepen.io/FlyTori/pen/GRxXpJG)|
|Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/zYWJazQ)|
|Pony#6778|[Codepen](https://codepen.io/Pony0303/pen/NWYLJpJ)|
|狸貓#5863|[Codepen](https://codepen.io/tanuki320/pen/XWExMLB)|
|kancheng#3915|[Codepen](https://codepen.io/kancheng/pen/zYWMeMy)|
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/XWEoVxM?editors=0100)|
|郭芙蘭#6374|[Codepen](https://codepen.io/flora_Kuo/pen/OJvrKGG?editors=1100)|
|Nini Chen#5790|[Codepen](https://codepen.io/ninistyle/pen/bGvzNmy?editors=1100)|
|Shuo#1596|[codepen](https://codepen.io/chiangchungshuo/pen/yLKZgmw)|
|Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/oNqmoOx)|
|Deborah#0033|[CodePen](https://codepen.io/deborah-tsai/pen/wvmNLye)|
|mei#8421|[CodePen](https://codepen.io/Shila-Chen/pen/wvmZaxV)|
|jin.huang#4666|[CodePen](https://codepen.io/hexschool/pen/qBoNzgq)|
|得源#8355|[CodePen](https://codepen.io/aglgvsie/pen/bGMbbdR)|
|NathanJames#8120|[CodePen](https://codepen.io/ufo060204/pen/zYjvJQB)|