---
# System prepended metadata

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

---

# 🏅 Day 24 - mixin

mixin 是 SCSS 中的一個實用功能，能夠將你經常撰寫的重複區塊包裝起來，在需要的地方直接引入，簡化整體程式碼。

### 題目

只需更換 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 / 答案 |
|:---:|:-------:|:--------------:|
|  1  |  Tetsu  |[Codepen](https://codepen.io/ttgchang/pen/WbQQoME) |
|2|Saika|[CodePen](https://codepen.io/saika4501/pen/jEbbVxa?editors=0110)|
|  3  | 登登登 |[CodePen](https://codepen.io/Duncanin/pen/NPGGbMg)|
|  4  |  Nooooora  |[Codepen](https://codepen.io/Nora-Ch/pen/wBKaLBy?editors=1100) |
|  5  |  Jerome  |[Codepen](https://codepen.io/qsc002163/pen/gbaagYW?editors=0100) |
|  6  | jchunnn |[Codepen](https://codepen.io/jchunnn/pen/KwddaKB)|
|  7  |  牛奶嘎  |[Codepen](https://codepen.io/Joyce-Niu/pen/vENNgWZ) |
|  8  | 那個貓貓 |[Codepen](https://codepen.io/zorakao/pen/Ggpprdy) |
|  9  | Chia__  |[Codepen](https://codepen.io/Chia-the-encoder/pen/GgppNzN) |
| 10  |  Jenna  |[Codepen](https://codepen.io/abiscc14/pen/ByooWoM) | 
| 11  |  地瓜  |[Codepen](https://codepen.io/ChippyYU/pen/JoYYWXy) |
|  12  |  Sam.S.T.Y  |[Codepen](https://codepen.io/Sam-Yang-the-animator/pen/PwPPpPx) | 
|  13  |  RUDY  |[Codepen](https://codepen.io/Rudy-crw/pen/Qwjjpgw?editors=0100) |
|  14  |  老屠  |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/zxvvZRd?editors=0110) |
|  15  |  随縁  |[Codepen](https://codepen.io/anki0072011/pen/yyYYgpr?editors=1100) |
|  16  |  suemma  |[Codepen](https://codepen.io/suemma/pen/dPYYvaQ) |
|  17  |  燕  |[Codepen](https://codepen.io/keyrtlij-the-reactor/pen/YPyyVzM) |
|  18  |  柔術小子  |[Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/LEppxay?editors=1100) |
|  19  |  KlausChen  |[Codepen](https://codepen.io/Klaus-Chen/pen/YPyyVrK) |
|  20  |  平平  |[Codepen](https://codepen.io/ypinpin/pen/pvjjPLa) |
|  21  |  社子畢卡索  |[Codepen](https://codepen.io/pen?template=LEppyXP) |
|  22  |  Fan  |[Codepen](https://codepen.io/btsihioy-the-reactor/pen/ZYbbXWa?editors=0100) |
|  23  |  Chris Wang  |[Codepen](https://codepen.io/Wang-Chris/pen/vENNWqp) |
|  24  |  Kiku  |[Codepen](https://codepen.io/Kiku0110/pen/YPyyYEj?editors=1100) |
|  25  |  pastor  |[Codepen](https://codepen.io/peter_hung/pen/vENNpXr) |
|  26  |  小懿  |[Codepen](https://codepen.io/YT-the-vuer/pen/OPyyQKm?editors=0100) |
|  27  |  An  |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/myeeXGV?editors=1100) |
|  28  |  kashiwatei  |[Codepen](https://codepen.io/kashiwatei/pen/MYaaGbK) |
|  29  |  Elvina  |[Codepen](https://codepen.io/Elvina-the-selector/pen/VYvvGEG?editors=1100) |
|  30  |  Katie |[Codepen](https://codepen.io/Katiekatiehsu/pen/ZYbbmpw?editors=1100) |
|  31  |  Huang Eagle |[Codepen](https://codepen.io/YuCi/pen/NPGGJmE) |
|  32  |  7Lun  |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/zxvvVdg) | 
|  33  |  Leonard  |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/MYaKgVQ?editors=0100) |
|  34  |  Min  |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/RNWrrBe) |
|  35  |  禹成林  |[Codepen](https://codepen.io/useirin/pen/gbaPwGB) |
|  36  |  PK  |[Codepen](https://codepen.io/Percy-Ku/pen/OPyMRdY) |
|  37  |  NGNLzenos  |[Codepen](https://codepen.io/xmijbzdb-the-animator/pen/yyYegdW?editors=1100) |
|  38  |  cks40660  |[Codepen](https://codepen.io/CKS40660/pen/vENLbao) |
|  39  |  Shawn  |[Codepen](https://codepen.io/LiShang/pen/jEbWJYK) |
|  40  |  Hao  |[Codepen](https://codepen.io/Howell/pen/ogjbOgB) | 
|  41  |  ja4071  |[Codepen](https://codepen.io/SHAO-L/pen/ByoKQRB?editors=1112) | 
|  42  |  主委加碼啦幹  |[Codepen](https://codepen.io/popbob-the-bashful/pen/dPYMKym) |
|  43  |  Doreen翠翠翠  |[Codepen](https://codepen.io/cuei-sian-Wang/pen/EaVyaQP?editors=0100) |
|  44  |  B  |[Codepen](https://codepen.io/Babel777/pen/zxvoERq) |
|  45  |  KOMATSU PEI  |[Codepen](https://codepen.io/Komatsu2021/pen/OPyWjjX?editors=1100) |
|  46  |  伊迪  |[Codepen](https://codepen.io/eku10rei/pen/LEpLGag?editors=0100) |
|  47  |  Calvin  |[Codepen](https://codepen.io/CalvinChang/pen/empjpxp) |
|  48  |  Celia  |[Codepen](https://codepen.io/Cindy-Ho/pen/GgpYdVw) |
|  49  |  cindy  |[Codepen](https://codepen.io/a50134/pen/RNWOVQV) |
|  59  |  Rogan  |[Codepen](https://codepen.io/RoganHsu/pen/ByjybyB) |
|  60  |  星雪糖  |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/emJwQXG?editors=0110) |

<!-- 快速複製 -->
<!-- |  排序  |  姓名  |[Codepen](連結) | -->