---
# System prepended metadata

title: "\U0001F3C5 Day 22 - SCSS 結構、SCSS 用法"
tags: [網頁切版直播班 - 2025 夏季]

---

# 🏅 Day 22 - SCSS 結構、SCSS 用法

SCSS 是一種 CSS 預處理器，需要透過編譯工具轉換成 CSS 才能被瀏覽器正確讀取。
使用 SCSS 的目的是為了優化程式碼，能夠減少許多重複工作，提升開發效率。

### 題目
將 CSS 內的程式碼改為 SCSS 的寫法，需使用到「**＆**」

範例：
```css=
.header{
  ...
}
.header-title{
  ...
}
.header a{
  ...
}
.header a:hover{
  ...
}
```
在 SCSS 寫法中會簡化如下
```sass=
.header{
  ...
  &-title{
    ...
  }
  a { 
    ...
    &:hover {
      ...
    }
  }
}
```

![](https://i.imgur.com/sUciuWS.png)
> 需透過 Codepen 繳交 （設定為 SCSS 模式）


CSS
```css
.header {
  background-size: cover;
  background-position: center center;
  background-image: url(../asset/img/header_desktop.png);
  background-repeat: no-repeat;
}
.header .banner {
  min-height: 420px;
}

.header .menu-bg {
  min-height: 58px;
  background: #ff0000;
  position: relative;
}

.header .menu {
  top: 0;
}

.header .menu ul a {
  display: block;
}
.header .menu ul li{
  color: #fff;
}

.header .menu ul li a:hover {
  font-weight: bolder;
}

.header .banner-title {
  max-width: 460px;
  background: #ff0000;
  color: #fff;
}

.header .main-menu {
  background: #ff0000;
  overflow: hidden;
}
.header .main-menu a:hover {
  background: #ff0000;
}
.header .hamburger-menu {
  display: block;
  float: right;
}
.header .menu-show {
  max-height: 165px;
}
.header .block-md {
  display: block;
}
```



## 回報流程

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

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

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


回報區
---

|  #  | Discord | CodePen / 答案 |
|:---:|:-------:|:--------------:|
| 01  |  Saika| [Codepen ](https://codepen.io/saika4501/pen/MYwdxKr)|
|  02  |  Calvin  |[Codepen](https://codepen.io/CalvinChang/pen/JoYdEvW) |
|  03  |  Nooooora  |[Codepen](https://codepen.io/Nora-Ch/pen/raOVjQL) |
|  04  | jchunnn |[Codepen](https://codepen.io/jchunnn/pen/EaVjZJW)|
|  05  | Jenna |[Codepen](https://codepen.io/abiscc14/pen/XJmbMdR)|
|  06  |  社子畢卡索  |[Codepen](https://codepen.io/pen?template=xbwGqqY) |
|  07  |  Chia__  |[Codepen](https://codepen.io/Chia-the-encoder/pen/NPGqdwo) |
|  08  |  KlausChen  |[Codepen](https://codepen.io/Klaus-Chen/pen/GgpJWqe?editors=1100) |
|  09  |  Hao  |[Codepen](https://codepen.io/Howell/pen/PwPqpyw) |
|  10  |  pastor  |[Codepen](https://codepen.io/peter_hung/pen/WbQvpXr) |
|  11  | 那個貓貓 |[Codepen](https://codepen.io/zorakao/pen/OPyVmQmr) |
|  12  |  Tetsu  |[Codepen](https://codepen.io/ttgchang/pen/VYvLWZm) |
|  13  |  Jerome  |[Codepen](https://codepen.io/qsc002163/pen/jEbPwLR?editors=0100) |
|  14  |  登登登  |[Codepen](https://codepen.io/Duncanin/pen/xbwGrMd) |
|  15  |  平平  |[Codepen](https://codepen.io/ypinpin/pen/myeJwZG) |
|  16  |  RUDY  |[Codepen](https://codepen.io/Rudy-crw/pen/zxvGdvw?editors=1100) |
|  17  |  小懿  |[Codepen](https://codepen.io/YT-the-vuer/pen/EaVjwRz?editors=0100) |
|  18  |  Fan  |[Codepen](https://codepen.io/btsihioy-the-reactor/pen/OPyVxog?editors=0100)| 
|  19  |  燕  |[Codepen](https://codepen.io/keyrtlij-the-reactor/pen/raOVYoe) |
|  20  |  7Lun  |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/empNyQe?editors=1100) |
|  21  |  Leonard  |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/gbapvXL?editors=0100) |
|  22  |  牛奶嘎  |[Codepen](https://codepen.io/Joyce-Niu/pen/NPGqyYw) |
|  23  |  kashiwatei  |[Codepen](https://codepen.io/kashiwatei/pen/xbwGYjo) |
|  24  |  ChrisWang  |[Codepen](https://codepen.io/Wang-Chris/pen/raOVdGa) |
|  25  |  CBK  |[Codepen](https://codepen.io/BK-C-the-styleful/pen/GgpJdRw) |
|  26  |  Kiku  |[Codepen](https://codepen.io/Kiku0110/pen/ZYbGoQp?editors=1100) |
|  27  |  An  |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/QwjbxWp?editors=0100) |
|  28  |  Katie  |[Codepen](https://codepen.io/Katiekatiehsu/pen/ZYbGRBo?editors=0100)
|  29  |  禹成林  |[Codepen](https://codepen.io/useirin/pen/MYawPXq) |
| 30  |  Sam.S.T.Y  |[Codepen](https://codepen.io/Sam-Yang-the-animator/pen/raOVPgb?editors=1100) | 
| 31  |  地瓜  |[Codepen](https://codepen.io/ChippyYU/pen/KwdpYzp) | 
| 32  |  老屠  |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/pvjJBjJ?editors=0100) | 
| 33  |  PK  |[Codepen](https://codepen.io/Percy-Ku/pen/myeebjE) |
|  34 |  cks40660  |[Codepen](https://codepen.io/CKS40660/pen/NPGGKZy) |
|  35  |  Elvina  |[Codepen](https://codepen.io/Elvina-the-selector/pen/KwddPRQ?editors=1100) |
|  36  |  Rogan  |[Codepen](https://codepen.io/RoganHsu/pen/WbQQbar) |
|  37  |  suemma  |[Codepen](https://codepen.io/suemma/pen/qEOObGM) |
|  38  |  Min  |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/PwPqOad) |
|  39  |  Huang Eagle  |[Codepen](https://codepen.io/YuCi/pen/EaVVrRO) |
|  40  |  ja4071  |[Codepen](https://codepen.io/SHAO-L/pen/bNVVyGV?editors=1112) |
|  41  |  NGNLzenos  |[Codepen](https://codepen.io/xmijbzdb-the-animator/pen/XJmXpWo) |
|  42  |  Doreen翠翠翠  |[Codepen](https://codepen.io/cuei-sian-Wang/pen/MYaymWy) |
|43|小趴|[Codepen](https://codepen.io/papa2415/pen/myePwEe)|
|  44  |  主委加碼啦幹  |[Codepen](https://codepen.io/popbob-the-bashful/pen/zxvqjPr) |
|  45  |  Gloria  |[Codepen](https://codepen.io/ilztzykz-the-decoder/pen/pvjJmOK?editors=0100) |
| 46 | water |[Codepen](https://codepen.io/wateruby/pen/GgpqgJE)|
|  47  |  Evelyn  |[Codepen](https://codepen.io/ewdyvnmp-the-typescripter/pen/EaVyaNa) |
|  48  |  B  |[Codepen](https://codepen.io/Babel777/pen/OPybjzm) |
|  49  |  KOMATSU PEI  |[Codepen](https://codepen.io/Komatsu2021/pen/dPYOBOe?editors=0100) |
|  50  |  伊迪  |[Codepen](https://codepen.io/eku10rei/pen/LEpyNGK?editors=0100) |
|  51  |  YUCCC  |[Codepen](https://codepen.io/taroooo/pen/OPygKbr) |
|  52  |  Midy Wu  |[Codepen]([連結](https://codepen.io/work-wu/pen/QwjQqbZ)) |
|  53  |  cindy  |[Codepen](https://codepen.io/a50134/pen/XJmYMvB) |
|  54  |  celia  |[Codepen](https://codepen.io/Cindy-Ho/pen/EaVdLQy) |
|  55  |  星雪糖  |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/ZYQdmXB?editors=0100) |



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