---
# System prepended metadata

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

---


將 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 | Eden | [Codepen](https://codepen.io/iseden/pen/OJarzoV)|
| 02 | 銀光菇 | [Codepen](https://codepen.io/genesynthesis/pen/WNYLdaG) |
| 03 | ryan.chou | [Codepen](https://codepen.io/csw8524/pen/KKrbZJm) |
| 04 |Moreene|[CodePen](https://codepen.io/Moreene/pen/QWJzaJd)|
| 05 |rjjq|[Codepen](https://codepen.io/rjjq/pen/eYQbyMG)|
| 06 |Vic_Liou|[CodePen](https://codepen.io/allenliou-java/pen/jOQXYJm)|
| 07 | Tami | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/Jjewjay) |
| 08 | zhu.lin | [Codepen](https://codepen.io/codepenplayer/pen/mdQapQb) |
| 09 | Yu | [Codepen](https://codepen.io/yuch3n_chen/pen/QWJzaRp?editors=0100) |
| 10 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/zYMypJW) |
| 11 | bf_tsai | [Codepen](https://codepen.io/BF-Tsai/pen/OJarzeN) |
| 12 | ning_bobo | [Codepen](https://codepen.io/ninghsu/pen/yLQGvBP?editors=0100) |
| 13 | pinyi_9 | [Codepen](https://codepen.io/Wpypy/pen/poQqpXW) |
| 14 | xuan#0808 | [Codepen](https://codepen.io/xuan0915/pen/KKrbQzy?editors=0100) |
| 15 | ann6212 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/dyQwdOb?editors=0100) |
| 16 | kuanju27 | [Codepen](https://codepen.io/Eero-Chiao/pen/OJarQWW) |
| 17 | deli0529 | [Codepen](https://codepen.io/delichaomoon/pen/JjewpEq)|
| 18 | lychee_kk | [Codepen](https://codepen.io/kakakala/pen/NWEeyYX) |
| 19 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/YzRdeEw?editors=0110)|
| 20 | Tina02 | [Codepen](https://codepen.io/chjitlox-the-bashful/pen/xxQmYjv)|
| 21 | hannahTW | [Codepen](https://codepen.io/hangineer/pen/GRwPQEj?editors=0100)|
| 22 | SmallP | [Codepen](https://codepen.io/smallp/pen/NWEeyzX)|
| 23 | townyuan | [Codepen](https://codepen.io/townyuan/pen/rNQoJpo) |
| 24 | Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/jOQXZeK?editors=1100) |
| 25 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/OJarQBj) |
| 26 | Martin | [Codepen](https://codepen.io/markyourpage/pen/KKrbQLG) |
| 27 | adele6199 | [Codepen](https://codepen.io/codepen-io-winnie/pen/OJarQrx?editors=1100) |
| 28 | 小夏 | [Codepen](https://codepen.io/michaelhsia/pen/dyQwmbp?editors=1100) |
| 29 | Paul#7426 | [Codepen](https://codepen.io/paul-1997/pen/WNYLzxY?editors=0110) |
| 30 | cest_jessie | [Codepen](https://codepen.io/itsjessiechen/pen/MWzZrqv) |
| 31 | liam9930 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/rNQodwV) |
| 32 | Uli | [Codepen](https://codepen.io/uli1313/pen/ExOGEOZ?editors=0100) |
| 33 | Cura | [Codepen](https://codepen.io/curalin/pen/jOQXzoO?editors=0100) |
| 34 | jacky7035 | [Codepen](https://codepen.io/adens123/pen/GRwPdgP) |
| 35 | Atsushi#6888 | [Codepen](https://codepen.io/atsushi-amuro/pen/vYQvjKQ?editors=0100) |
| 36 | shcopy | [Codepen](https://codepen.io/shcopy/pen/PoxXepr) |
| 37 | 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/MWzZGQm) |
| 38 | .icesam | [Codepen](https://codepen.io/icesam/pen/xxQmWVZ) |
| 39 | mm_ieat | [Codepen](https://codepen.io/MINN3/pen/bGQOMOe) |
| 40 | ovo.yun | [Codepen](https://codepen.io/yun-the-scripter/pen/ZEmVRej?editors=0110) |
| 41 | meowmeow | [Codepen](https://codepen.io/snow1224/pen/VwVqdVa) |
| 42 | ming0712 | [Codepen](https://codepen.io/StevenHuang/pen/ZEmVRKj?editors=0100) |
| 43 | Kimi #9564 | [Codepen](https://codepen.io/kimihu91/pen/gOQdozm)|
| 44 | Lianne.. | [Codepen](https://codepen.io/Elaina-L/pen/KKrbMgY?editors=0100) |
| 45 | 泊岸#3466 | [Codepen](https://codepen.io/qoq77416416/pen/bGQOjPy?editors=1100) |
| 46 | m_m | [Codepen](https://codepen.io/minnn7716/pen/PoxXdWv) |
| 47 | yunhsinnnnnnn | [Codepen](https://codepen.io/yun___hsin/pen/LYXMgqp?editors=0110) |
| 48 | yu.t_liu | [Codepen](https://codepen.io/YuT200053/pen/wvQRQzX) |
| 49 | runweiting | [Codepen](https://codepen.io/weiting14/pen/PoxXxpR) |
| 50 | Johnson3669 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/gOQZZvV) |
| 51 | soniawu | [Codepen](https://codepen.io/YUJOU/pen/bGQOOMV?editors=1100) |
| 52 | awei | [Codepen](https://codepen.io/hong-wei/pen/VwVqgyL?editors=0100) |
| 53 | JohnChien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/bGQOZbv) |
| 54 | hebin. | [Codepen](https://codepen.io/landyhsiao776/pen/YzRBzdY)|
| 55 | Mylène | [Codepen](https://codepen.io/hamajibashi/pen/PoxVbRb) |
| 56 | tanuki5863 | [Codepen](https://codepen.io/tanuki320/pen/KKrJxPO) |
| 57 | kimlemon0720 | [Codepen](https://codepen.io/znohmess-the-builder/pen/WNYPMVM) |
| 58 | dong2328 | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/jOQdJgo) |
| 59 | wind | [Codepen](https://codepen.io/wind7y/pen/PoxVLvB) |
| 60 | 依依 | [Codepen](https://codepen.io/Rita-Yang/pen/jOQdRaP?editors=0100) |
| 61 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/abQXxEy) |
| 62 | Aritan1931 | [Codepen](https://codepen.io/Aritan/pen/LYXqoxq) |
| 63 | Randy | [Codepen](https://codepen.io/landy510/pen/YzRgPGa?editors=0100) |
| 64 | Sinsaki | [Codepen](https://codepen.io/a8322342/pen/mdQoJqy) |
| 65 | andersonshen | [Codepen](https://codepen.io/luxyenni-the-bold/pen/OJaqyRj) |
| 66 | PayRoom | [CodePen](https://codepen.io/water38198/pen/xxQBVga) 
| 67 | Long | [CodePen](https://codepen.io/Loonng/pen/gOQERZo?editors=0110) 
| 68 | Renee Wang | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/GRwPBpM) |
| 69 | 舜仁 | [Codepen](https://codepen.io/randomno/pen/abQxGxW) |
| 70 | 阿賀#3700 | [Codepen](https://codepen.io/sungho/pen/zYMXaYw) |
| 71 | yuan2781 | [Codepen](https://codepen.io/ismebir/pen/ExOJRLE) |
| 72 | NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/LYXvBKG) |
| 73 | 出事了阿伯#9923 | [Codepen](https://codepen.io/BradpittLai/pen/WNYabqJ) |
| 74 | ROGER | [Codepen](https://codepen.io/jxyrmcxm-the-scripter/pen/bGQyZqw) |
| 75 | shuuu | [Codepen](https://codepen.io/afjrvjzl-the-bashful/pen/poQXNpj) |
| 76 | .zack_p | [Codepen](https://codepen.io/Designer-PH/pen/eYQqYBE) |
| 77 | yuchou#5749 | [Codepen](https://codepen.io/yu-chou/pen/zYMgeVN) |
| 78 | SKey#9905 | [Codepen](https://codepen.io/Dale-Chien/pen/VwqZZjP) |
|79|KC_8685|[Codepen](https://codepen.io/cathy7411/pen/GRPKXNg)|
|80|RX00#5351|[Codepen](https://codepen.io/llqzknqv-the-styleful/pen/ExGYeWe)|
| 81 | WA | [Codepen](https://codepen.io/ldddl/pen/wvRvgXL) |
| 82 | FanJJ#8061 | [Codepen](https://codepen.io/yfchenn/pen/rNoVgBY?editors=1100) |
| 83 | peggy3169 | [Codepen](https://codepen.io/peggylai/pen/wvRKrgM?editors=0100) |
| 84 | 阿維#2569 | [Codepen](https://codepen.io/iijojpli-the-looper/pen/wvRMKEy?editors=0100) |
| 85 | 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/vYvLjzR) |
| 86 | ChrisSQR | [Codepen](https://codepen.io/ChrisSQR/pen/QWzgEeP) |
| 87 | patrickpie | [Codepen](https://codepen.io/patrickpie/pen/NWeyWgq?editors=0110) |
| 88 | 楓 | [Codepen](https://codepen.io/maplestartend/pen/mdoyXWZ) |

---

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