# 🏅 Day 29 - 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 / 答案 |
|:---:|:-------:|:--------------:|
| 01 | Jainee |[ Codepen](https://codepen.io/Jainee0110/pen/XWLjEpN) |
| 02 | GAVI |[Codepen](https://codepen.io/qbafldcv-the-scripter/pen/MWMpbJr)|
| 03 | Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/JjQWbqP)|
| 04 | Kiwi |[Codepen](https://codepen.io/kiwi1113/pen/qBzrqvW)|
| 05 | han |[Codepen](https://codepen.io/iamHanCheng/pen/XWLMNoO)|
| 06 | 雪粒 |[Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/xxoqgxK)|
| 07 | tim |[Codepen](https://codepen.io/jskrtivy-the-animator/pen/abgoOme)|
| 08 | Mars |[Codepen](https://codepen.io/MarsKuo/pen/MWMpJyL)|
| 09 | yoishere |[Codepen](https://codepen.io/yoishere/pen/YzoZNqp)|
| 10 | 毛巾 |[Codepen](https://codepen.io/bqdcjboa-the-solid/pen/abgJpmz)|
| 11 | Ariel |[Codepen](https://codepen.io/ariel0510/pen/jOjByqv)|
| 12 | fendy1223 |[Codepen](https://codepen.io/fendy1223/pen/jOjByrv)|
| 13 | Lobinda | [Codepen](https://codepen.io/Lobinda/pen/PorpWbO)|
| 14 | 俊 | [Codepen](https://codepen.io/jun12079/pen/LYKWxJW)|
| 15 | lunlun0514 | [Codepen](https://codepen.io/f5badapple/pen/Porppoy)|
| 16 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/QWXppVy)|
| 17 | Dolce_墨 |[Codepen](https://dolcetseng.github.io/vite-training/29.html)|
| 18 | n913239 |[Codepen](https://codepen.io/n913239/pen/zYVZwpM?editors=1100)|
| 20 | NocabWang(培根) |[Codepen](https://codepen.io/PeihanWang/pen/poXewPG?editors=0100)|
| 21 | 泊岸 |[Codepen](https://codepen.io/qoq77416416/pen/VwJppgq)|
| 22 | kawa |[Codepen](https://codepen.io/z83xji6/pen/mdZWMjo)|
| 23 | Jim |[Codepen](https://codepen.io/JimChou/pen/LYKWzqP?editors=0100)|
| 24 | brucelee0629 |[Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/oNrZGJN)|
| 25 | Kai | [Codepen](https://codepen.io/beginneraboutlife116/pen/yLdMPWB)|
| 26 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/xxoqYEy)
| 27 | Kaya |[Codepen](https://codepen.io/kayaribi/pen/LYKWQzv)|
| 28 | Mike |[Codepen](https://codepen.io/mike2049/pen/GRbWQYq?editors=1100)|
| 29 | wind |[Codepen](https://codepen.io/wind7y/pen/rNEydBP)|
| 30 | Sonia |[Codepen](https://codepen.io/YUJOU/pen/ExBWELV?editors=1100)|
| 31 | MY |[Codepen](https://codepen.io/ahmomoz/pen/xxoqWME?editors=1100)|
| 32 | haojing |[Codepen](https://codepen.io/hjxu/pen/BagWxKM)|
| 33 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/gONmKYY)|
| 34 | 陳小廷 |[Codepen](https://codepen.io/ting1124/pen/abgJQve)|
| 35 | yaoling.liang |[Codepen](https://codepen.io/Yao-Ling-L-/pen/dyBvwrg)|
| 36 | KUN. |[Codepen](https://codepen.io/barry91205/pen/yLdMWKp)|
| 37 | jimmy.0706 |[Codepen](https://codepen.io/JimmyMao/pen/ZEdKryX)|
| 38 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/poXPVpv)|
| 39 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/KKjmrYb) |
| 40 | Theodore | [Codepen](https://codepen.io/GustavoFringgg/pen/gONWJrJ?editors=0110) |
| 41 | PoWei#8484 | [Codepen](https://codepen.io/Po-Wei-Lai/pen/XWLRvjm) |
| 42 | 嚼勁先生 |[Codepen](https://codepen.io/James520284/pen/OJegmXe)|
| 43 | xcx100 |[Codepen](https://codepen.io/c13026/pen/RwzgyMQ)|
| 44 | EdHuang |[Codepen](https://codepen.io/yide1986/pen/XWLgYXM)|
| 45 | Kerwin |[Codepen](https://codepen.io/kerwin/pen/PorjxGz)|
| 46 | Amy(咂摳) |[Codepen](https://codepen.io/nnxucgmc-the-builder/pen/jOjwdRy?editors=1100)|
| 47 | Sammy |[Codepen](https://codepen.io/fsczdlla-the-bold/pen/ZEdyPyR)|
| 48 | glen_69515 |[Codepen](https://codepen.io/glenyaochih/pen/VwJWRqe)|
| 49 | Anna |[Codepen](https://codepen.io/Anna-Teng/pen/bGPrYdp?editors=0110)|
| 50 | ss585801 |[Codepen](https://codepen.io/ss585801/pen/QWXMzeP?editors=0100)|
| 51 | Toung |[Codepen](https://codepen.io/Toung/pen/bGPrXrv)|
| 52 | Arvin |[Codepen](https://codepen.io/arvinyang1925/pen/GRbMZBP)|
| 53 | emmayo |[Codepen](https://codepen.io/emmayo/pen/mdZBxVg)|
| 54 | Emma |[Codepen](https://codepen.io/Emma0919/pen/YzorOrW)|
| 55 | Joanne hu |[Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/VwJyBdG?editors=1100)|
| 56 | jasonlin |[Codepen](https://codepen.io/gfswkraq-the-reactor/pen/ExBoqrr)|
| 57 | Discord |[Codepen](https://codepen.io/Barry-C/pen/oNrpRjX?editors=0100)|
| 58 | 野鴿 |[Codepen](https://codepen.io/HoshinoSyouta/pen/YzoeEwE)|
| 59 | Enn |[Codepen](https://codepen.io/enntang/pen/eYwMvOB)|
| 60 | Ana |[Codepen](https://codepen.io/Ana-Wu/pen/LYKdvbd?editors=0100)|
| 61 | OSN |[Codepen](https://codepen.io/osncodepen/pen/MWMBVJX)|
| 62 | chris |[Codepen](https://codepen.io/chris-chen-the-selector/pen/vYqPEOQ)|
| 63 | 深海 |[Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/LYKvYML)|
| 64 | Lotte |[Codepen](https://codepen.io/hmkdoxuj-the-decoder/pen/zYVgjOQ?editors=0100)|
| 65 | Jack |[Codepen](https://codepen.io/kxbhixte-the-sasster/pen/eYqOemR?editors=0100)|
| 66 | zen |[Codepen](https://codepen.io/zen742937/pen/oNKvQJR)|
| 67 | Chuang |[Codepen](https://codepen.io/uidoytjq-the-solid/pen/xxvQoWv?editors=1100)|

<!-- )
| No | Discord |[Codepen]()|
-->