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

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

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

範例：

.header{
  ...
}
.header-title{
  ...
}
.header a{
  ...
}
.header a:hover{
  ...
}

在 SCSS 寫法中會簡化如下

.header{
  ...
  &-title{
    ...
  }
  a { 
    ...
    &:hover {
      ...
    }
  }
}

> 需透過 Codepen 繳交 （設定為 SCSS 模式）

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://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](連結) | -->