---
# System prepended metadata

title: "\U0001F3C5 Day 30"
tags: [網頁切版直播班 - 2022 夏季班]

---

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

## mixin

### 題目

只需更換 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 / 答案                            |
|:-----------------:|:-------------------------------------------------------------------:|
|  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)|