---
# System prepended metadata

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

---

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

## SCSS 結構、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?editors=1100 -->


回報區
---


|     Discord     |                         CodePen / 答案                          |
|:---------------:|:---------------------------------------------------------------:|
| Iris Huang#6727 |        [CodePen](https://codepen.io/ythuang/pen/PoRQbew)        |
|  CloThEs#7837   |       [CodePen](https://codepen.io/CloThEsZ/pen/QWmQJjg)        |
|   布魯諾#7239   |       [CodePen](https://codepen.io/bruno-yu/pen/jOzZQBa)        |
| Clara Cai#7097  |      [CodePen](https://codepen.io/Clara-Snowy/pen/abYqQpX)      |
|   Clara#1275    |       [CodePen](https://codepen.io/bsupixqu/pen/jOzZQzz)        |
| choubree #4350  |                          [CodePen](#)                           |
|   JarDar#6980   |       [codepen](https://codepen.io/jardarpen/pen/bGvLQxY)       |
|   黃士桓#7654   |    [codePen](https://codepen.io/shr-huan-huang/pen/rNdJQbb)     |
|  WEI_RIO#9342   |        [codePen](https://codepen.io/wei_wu/pen/mdxXQQR)         |
|    大衛#4869    | [codePen](https://codepen.io/exnsrpjc/pen/dymdQaG?editors=0110) |
|    𝓛𝓊𝒸𝓎#8635    |       [CodePen](https://codepen.io/lucygirl/pen/NWYyeKM)        |
|    Hsiu#8767    |       [CodePen](https://codepen.io/amy-hsiu/pen/RwMQqdK)        |
|   黑白兔#0684   |       [CodePen](https://codepen.io/johnny329/pen/RwMQENV)       |
| christina#6185  |      [Codepen](https://codepen.io/chrisc0210/pen/yLKvGOw)       |
|    L0F0#8733    |   [CodePen](https://codepen.io/l0f0/pen/GRxQPgv?editors=0100)   |
|    洋蔥#5295    |  [CodePen](https://codepen.io/HSUNA/pen/QWmQzLB?editors=0100)   |
|    威爾#1694    |        [CodePen](https://codepen.io/WILL_Wu/pen/VwXQqXM)        |
|   azami#5986    |         [CodePen](https://codepen.io/azami/pen/RwMQELj)         |
| Yuna Huang#2692 | [CodePen](https://codepen.io/Yuna1002/pen/GRxQPxd?editors=0100) |
|    Chi#7605     |         [Codepen](https://codepen.io/YoChi84/pen/RwMQEeM)       |
|peter#0|[Codepen](https://codepen.io/JIAN-RONG/pen/RwMQEqy?editors=0100)|
|zera#6060|[codePen](https://codepen.io/zera-tseng/pen/rNdJoZx)|
|Karol-Kuo#5287|[codePen](https://codepen.io/ting-yu-kuo/pen/KKoQbLK)|
|Potatolee#7749|[codePen](https://codepen.io/potatoleee/pen/zYWRexZ?editors=1100)|
| PeggyLiao#1552 |[CodePen](https://codepen.io/PeiJu-Liao/pen/BarYMBb?editors=0100)|
| 咻蹦#1526 |[CodePen](https://codepen.io/emmasyu/pen/LYdQqVe?editors=0100)|
| 時雨#8837 |[CodePen](https://codepen.io/jjustin-35/pen/vYRdbLz?editors=0100)|
|int#7518|[Codepen](https://codepen.io/intHuang/pen/ZExrwJe?editors=0110)|
| 小白#2406 | [CodePen](https://codepen.io/gracewhite/pen/XWEZONR) |
|威0#6919|[Codepen](https://codepen.io/n0918679182/pen/NWYyoLN?editors=0100)|
|Joyce#3790|[Codepen](https://codepen.io/joycehuang/pen/eYMVxxe?editors=0100)|
| 我是泇吟 #5189 | [CodePen](https://codepen.io/hexschool/pen/NWYRKpR?editors=1100) |
| ajhappy#6488 | [CodePen](https://codepen.io/ajhappy5438/pen/vYRdPyE) |
|Ke#1391|[Codepen](https://codepen.io/federerke/pen/abYqMOR)|
|小諾#1866|[Codepen](https://codepen.io/noichan/pen/xxWYBJv)|
|Fang #4680|[Codepen](https://codepen.io/std95174/pen/JjLpzQo?editors=0100)|
|Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/QWmQoKM)|
|WEI#0797|[Codepen](https://codepen.io/wei-z/pen/poLaBxz?editors=0110)|
| yuyu#6310 |[Codepen](https://codepen.io/yuyu0905/pen/mdxXgpX?editors=0100)|
| LHchien33#6232 |[Codepen](https://codepen.io/lin_chien/pen/RwMQOEy)|
|溡月#2553|[Codepen](https://codepen.io/winterwinterpu/pen/PoRQvwV)|
|Henry#7386|[Codepen](https://codepen.io/h1nr9/pen/rNdJgrG)|
|雷雷#7844|[Codepen](https://codepen.io/lei-yi-jie/pen/dymdEjQ?editors=0110)|
|QOO#8446|[Codepen](https://codepen.io/QOOQOOQ/pen/eYMVwRj?editors=1100)|
|Vian#7338|[Codepen](https://codepen.io/vianwu31/pen/zYWRVPy)|
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/abYqgXe?editors=0100)|
|YI#0863|[Codepen](https://codepen.io/YI0305/pen/xxWYvOw)|
|IreneY #0086|[Codepen](https://codepen.io/HalfPlannedJourney/pen/ZExrgBd)|
|Melon #0380 | [Codepen](https://codepen.io/BalaFang/pen/LYdQwOx)|
|Arista#5802 | [Codepen](https://codepen.io/arista-hsieh/pen/ExEQqey)|
|ssozr#4680|[codepen](https://codepen.io/ssozr/pen/poLLzWb?editors=0100)|
| YU #0618 |        [CodePen](https://codepen.io/yoken_/pen/bGvvGzY)        |
|Sentimets#4883|[codepen](https://codepen.io/Sentiments/pen/BarrjjY?editors=0100)
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/ExEEVJB?editors=1100) |
 |yu魚#1330   |  [CodePen](https://codepen.io/Yu_yu/pen/vYRRGJQ)| 
 |sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/mdxxPQY)
 |bonnieli1414#4906|[Codepen](https://codepen.io/bonnieli1414/pen/QWmmvzE?editors=0100)|
 | YC#2522 | [CodePen](https://codepen.io/YCLu/pen/NWYYjox) |
 |Benson#6763|[CodePen](https://codepen.io/kumashow/pen/JjLLJWx)|
 | Amberhh #2465 | [Codepen](https://codepen.io/Amberhh/pen/WNzMLgW)|
 |阿翰 #1984|[Codepen](https://codepen.io/JohnHan05/pen/PoRRjWZ?editors=1100)|
 |RayChen#6088|[Codepen](https://codepen.io/raychen1996/pen/NWYYzqm))|
 | 楓之聲#6945 | [Codepen](https://codepen.io/sshane258/pen/jOzzKMO) |
 | Yunei#6323 | [Codepen](https://codepen.io/Yunei/pen/poLLKEJ) |
| 鉦勝 #8333 | [Codepen](https://codepen.io/atckmax823/pen/xxWWJPM?editors=0100) |
| LinaChen#1796 | [Codepen](https://codepen.io/LinaChen/pen/yLKKeYG) |
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/PoRRyzx?editors=0100)|
| JackC#0411 | [Codepen](https://codepen.io/key0329/pen/RwMMqda) |
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/abYyEKR)|
|HSINYU#1182|[Codepen](https://codepen.io/hsinfish/pen/wvmmNWO)|
|NeilLin#3009|[Codepen](https://codepen.io/a0071421/pen/ZExoYbm?editors=0110)|
|家洋#6999|[Codepen](https://codepen.io/aa235553756/pen/qBoYdXP)|
| Shuo#1596 |[Codepen](https://codepen.io/chiangchungshuo/pen/rNdvaXV)
| suihsilan#9485 |[Codepen](https://codepen.io/suihsilan/pen/poLaBjq?editors=1100)
|aki|[codepen](https://codepen.io/aki168/pen/WNzJrYY)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/GRxdWoN)|
|kevin8349#6131|[Codepen](https://codepen.io/kun8349/pen/oNqdqwJ)|
|mei#8421|[Codepen](https://codepen.io/Shila-Chen/pen/QWmrmJg)|
|阿蘇#8531|[Codepen](https://codepen.io/susu3131/pen/MWVGBJo)|
|艾芮絲#6060|[Codepen](https://codepen.io/wangyingju/pen/oNqdMpm)|
|yo_yo#2678|[Codepen](https://codepen.io/djmliogn-the-flexboxer/pen/QWmrPeJ)|
|allen#08676|[Codepen](https://codepen.io/sodarman/pen/zYWjgZb)|
|Cream#3449|[Codepen](https://codepen.io/frxdwbbi-the-sasster/pen/zYWaEXN?editors=1100)|
|紙飛機 #1335|[Codepen](https://codepen.io/paperplanea/pen/LYdramJ?editors=0110)|
|Nini Chen#5790|[Codepen](https://codepen.io/ninistyle/pen/dymjYyd?editors=1100)|
|Jamie Wu#9345|[Codepen](https://codepen.io/Wu220103/pen/qBoyONp)|
| Barret#1119| [CodePen](https://codepen.io/barret0720/pen/mdxjKJR)|
| Tori#1248| [CodePen](https://codepen.io/FlyTori/pen/bGvxdyQ)|
|Tuhacrt#0008|[CodePen](https://codepen.io/Tuhacrt/pen/yLKxEVx)|
|Pony#6778|[Codepen](https://codepen.io/Pony0303/pen/GRxXzbO)|
|狸貓#5863|[Codepen](https://codepen.io/tanuki320/pen/eYMPOxw)|
|kancheng#3915|[Codepen](https://codepen.io/kancheng/pen/jOzQdLw)|
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/yLKGpzN?editors=0110)|
|郭芙蘭#6374|[Codepen](https://codepen.io/flora_Kuo/pen/JjLxPWZ?editors=1100)|
|鎔瑄#8578|[CodePen]( https://codepen.io/barbarayou/pen/GRxzqzv?editors=0110) |
|Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/VwXgmpV)|
|Deborah#0033|[CodePen](https://codepen.io/deborah-tsai/pen/KKoJpem)|
|jin.huang#4666|[CodePen](https://codepen.io/haha1196/pen/eYMarwa)|
|NathanJames#8120|[CodePen](https://codepen.io/ufo060204/pen/NWMGBea)|
|RuoAn#7124|[CodePen](https://codepen.io/LiauRuoAn/pen/eYrRKMW)|