---
# System prepended metadata

title: "\U0001F3C5 Day 29 - mixin"
tags: [網頁切版直播班 - 2023 夏季班]

---

### 題目

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

**CSS**
```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**

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

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

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

## 回報流程

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

![](https://i.imgur.com/vftL5i0.png)

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


回報區
---


| # |      Discord      |                           CodePen / 答案                   |
|:-:|:----------------:|:----------------------------------------------------------:|
| 01 | hebin. | [Codepen](https://codepen.io/landyhsiao776/pen/NWEoyOa)|
| 02 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/VwVgQqL) | 
| 03 | Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/rNQPJqQ) |
| 04 | runweiting | [Codepen](https://codepen.io/weiting14/pen/qBQgxJe) |
| 05 | 銀光菇 | [Codepen](https://codepen.io/genesynthesis/pen/RwqvQdR) |
| 06 | cest_jessie | [Codepen](https://codepen.io/itsjessiechen/pen/LYXqQvY) |
| 07 | Yu | [Codepen](https://codepen.io/yuch3n_chen/pen/WNYPMBM?editors=0100) |
| 08 | lychee_kk | [Codepen](https://codepen.io/kakakala/pen/oNQmEKX) |
| 09 | Tami | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/zYMeRgQ) |
| 10 | ryan.chou | [Codepen](https://codepen.io/csw8524/pen/bGQzLXY) |
| 11 | pinyi_9 | [Codepen](https://codepen.io/Wpypy/pen/eYQxVXQ) |
| 12 | Ann Chou | [Codepen](https://codepen.io/annchou_illu/pen/dyQambG?) |
| 13 | ning_bobo | [Codepen](https://codepen.io/ninghsu/pen/VwVgXvj?editors=0100) |
| 14 | zhu.lin | [Codepen](https://codepen.io/codepenplayer/pen/rNQPdeg) |
| 15 | shcopy | [Codepen](https://codepen.io/shcopy/pen/gOQqexX) |
| 16 | 墨莉 | [Codepen](https://codepen.io/hoku0306/pen/GRwzxxy?editors=1100) |
| 17 | xuan#0808 | [Codepen](https://codepen.io/xuan0915/pen/ZEmwxZY) |
| 18 | jacky7035 | [Codepen](https://codepen.io/adens123/pen/PoxVRde) 
| 19 | Tina02 | [Codepen](https://codepen.io/chjitlox-the-bashful/pen/zYMeWXq) |
| 20 | townyuan | [Codepen](https://codepen.io/townyuan/pen/XWyOEBb) |
| 21 | kuanju27 | [Codepen](https://codepen.io/Eero-Chiao/pen/GRwzdRB) |
| 22 | 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/gOQqzbd) |
| 23 | Lianne._. | [Codepen](https://codepen.io/Elaina-L/pen/OJadRoL?editors=0100) |
| 24 | yunhsinnnnnnn | [Codepen](https://codepen.io/yun___hsin/pen/wvQNXLr?editors=1100) |
| 25 | markchen_ | [Codepen](https://codepen.io/Mark-JJchen/pen/gOQqKNm?editors=1100) |
| 26 | Martin | [Codepen](https://codepen.io/markyourpage/pen/LYXqmzd) |
| 27 | ovo.yun | [Codepen](https://codepen.io/yun-the-scripter/pen/WNYPKGy?editors=0100) |
| 28 | bf_tsai | [Codepen](https://hackmd.io/US-IJAHnSkye7XYItCBiqQ?both) |
| 29 | Uli | [Codepen](https://codepen.io/uli1313/pen/LYXqBXW?editors=0100) |
| 30 | deli0529 | [Codepen](https://codepen.io/delichaomoon/pen/vYQbavW) |
| 31 | Vic_Liou | [Codepen](https://codepen.io/allenliou-java/pen/dyQajrz) |
| 32 | hao2485 | [Codepen](https://codepen.io/Seanfeb16/pen/WNYPgwq) |
| 33 | ming0712 | [Codepen](https://codepen.io/StevenHuang/pen/LYXqJQd) |
| 34 | adele6199 | [Codepen](https://codepen.io/codepen-io-winnie/pen/vYQbzRQ) |
| 35 | Eden | [Codepen](https://codepen.io/iseden/pen/abQXaaE)
| 36 | dodo_6666 | [Codepen](https://codepen.io/MissDouble/pen/dyQaqej) |
| 37 | m_m | [Codepen](https://codepen.io/minnn7716/pen/VwVgVXp) |
| 38 | shuuu | [Codepen](https://codepen.io/afjrvjzl-the-bashful/pen/vYQbQze) |
| 39 | 泊岸#3466 | [Codepen](https://codepen.io/qoq77416416/pen/MWzLZZJ?editors=1100) |
| 40 | Atsushi#6888 | [Codepen](https://codepen.io/atsushi-amuro/pen/GRwzzqR?editors=0100) |
| 41 | Johnson3669 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/NWEoogd) |
| 42 | yu.t_liu | [Codepen](https://codepen.io/YuT200053/pen/jOQddZG) |
| 43 | mm_ieat | [Codepen](https://codepen.io/MINN3/pen/yLQZZEK) |
| 44 | hannahTW | [Codepen](https://codepen.io/hangineer/pen/BaGMMMR) |
| 45 | soniawu | [Codepen](https://codepen.io/YUJOU/pen/ZEmwZOQ?editors=0100) |
| 46 | ann6212 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/rNQPbdy) |
| 47 | Aritan1931 | [Codepen](https://codepen.io/Aritan/pen/PoxVvON) |
| 48 | JohnChien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/jOQdpqp) |
| 49 | wind | [Codepen](https://codepen.io/wind7y/pen/rNQPEdB) |
| 50 | Randy | [Codepen](https://codepen.io/landy510/pen/bGQZNXd?editors=0100) |
|51|Moreene|[CodePen](https://codepen.io/Moreene/pen/rNQRVBG)|
|52|awei|[CodePen](https://codepen.io/hong-wei/pen/xxQBGWm?editors=1100)|
| 53 | billy_ti | [Codepen](https://codepen.io/Ti-Show/pen/rNQRVqZ?editors=1100) |
| 54 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/xxQBwGv?editors=0110)|
| 55 | Sinsaki225 | [Codepen](https://codepen.io/a8322342/pen/VwVRvBp)|
| 56 | PayRoom | [CodePen](https://codepen.io/water38198/pen/dyQrMVE) |
| 57 | andersonshen | [CodePen](https://codepen.io/luxyenni-the-bold/pen/gOQErEw) |
| 58 | Paul#7426 | [Codepen](https://codepen.io/paul-1997/pen/NWEJrWw) |
| 59 | SmallP | [Codepen](https://codepen.io/smallp/pen/LYXaRNL) |
| 60 | dong2328 | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/NWEJbEj) |
| 61 | rjjq | [Codepen](https://codepen.io/rjjq/pen/dyQrNNG) |
| 62 | Long | [Codepen](https://codepen.io/Loonng/pen/yLQwoLm?editors=1100) |
| 63 | tanuki5863 | [Codepen](https://codepen.io/tanuki320/pen/KKrEQaa) |
| 64 | 小夏 | [Codepen](https://codepen.io/michaelhsia/pen/PoxLayN?editors=1100) |
| 65 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/oNQOjXK?editors=1100) |
| 66 | Renee Wang | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/dyQLYZY) |
| 67 | .icesam | [Codepen](https://codepen.io/icesam/pen/GRwLpaM) |
| 68 | meowmeow | [Codepen](https://codepen.io/snow1224/pen/GRwLZNa) |
| 69 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/KKrYNpV) |
| 70 | kimlemon0720 | [Codepen](https://codepen.io/znohmess-the-builder/pen/mdQgxKO) |
| 71 | 舜仁 | [Codepen](https://codepen.io/randomno/pen/jOQRKVW) |
| 72 | NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/mdQgGGK) |
| 73 | 出事了阿伯#9923 | [Codepen](https://codepen.io/BradpittLai/pen/WNYabqJ) |
| 74 | ROGER | [Codepen](https://codepen.io/jxyrmcxm-the-scripter/pen/YzRbgvP) |
| 75 | 阿賀#3700 | [Codepen](https://codepen.io/sungho/pen/zYMVwwo) |
| 76 | mm_ieat | [Codepen](https://codepen.io/MINN3/pen/yLQdwpo) |
| 76 | .zack_p | [Codepen](https://codepen.io/Designer-PH/pen/ZEmgEJJ) |
| 77 | .rainielin | [Codepen](https://codepen.io/Yunchian-Lin/pen/dyQxJox) |
| 78 | yuchou#5749 | [Codepen](https://codepen.io/yu-chou/pen/ZEmgPpB) |
| 79 | Mylène | [Codepen](https://codepen.io/hamajibashi/pen/bGQXNZK) |
| 80 | SKey#9905 | [Codepen](https://codepen.io/Dale-Chien/pen/oNJvvPe) |
|81|KC_8685|[Codepen](https://codepen.io/cathy7411/pen/WNLegOj)|
| 82 | WA | [Codepen](https://codepen.io/ldddl/pen/WNLNper) |
| 83 | peggy3169 | [Codepen](https://codepen.io/peggylai/pen/wvRKEWQ?editors=0100) |
| 84 | RX00#5351 | [Codepen](https://codepen.io/llqzknqv-the-styleful/pen/BavjZzW) |
| 85 | 阿維#2569 | [Codepen](https://codepen.io/iijojpli-the-looper/pen/ZEVQvjb?editors=0100) |
| 86 | 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/vYvLrOV) |
| 87 | FanJJ#8061 | [Codepen](https://codepen.io/yfchenn/pen/VwqaarE) |
| 88 | yuan2781 | [Codepen](https://codepen.io/ismebir/pen/VwVNBZJ?editors=1100) |
| 89 | ChrisSQR | [Codepen](https://codepen.io/ChrisSQR/pen/mdaMRzm) |
| 90 | patrickpie | [Codepen](https://codepen.io/patrickpie/pen/wvRyMdJ?editors=0110) |
| 91 | 楓 | [Codepen](https://codepen.io/maplestartend/pen/KKEwRGp) |

---

- 快速複製指令：
```markdown!
| 0 | user | [Codepen]() |
```
