# 🏅 Day 27 - SCSS 結構、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 | Jainee | [Codepen ](https://codepen.io/Jainee0110/pen/YzoGeME)|
| 02 | han | [Codepne](https://codepen.io/iamHanCheng/pen/jOjymWG) |
| 03 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/RwzKVVr)
| 04 | n913239 | [Codepen](https://codepen.io/n913239/pen/KKjamaQ?editors=1100) |
| 05 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/BagpRwR) |
| 06 | yoishere | [Codepen](https://codepen.io/yoishere/pen/JjQENJQ) |
| 07 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/OJeWmzm) |
| 08 | Mars | [Codepen](https://codepen.io/MarsKuo/pen/wvLgdjr) |
|09|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/OJeWmwj)|
| 10 | fendy1223 | [Codepen](https://codepen.io/fendy1223/pen/zYVNwjX) |
| 11 | Kiwi | [Codepen](https://codepen.io/kiwi1113/pen/oNrBWpg) |
| 12 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/abgoOme) |
| 13 | Dolce_墨 | [Codepen](https://dolcetseng.github.io/vite-training/27.html) |
| 14 | lianne.. | [Codepen](https://codepen.io/Elaina-L/pen/qBzRjbN) |
| 15 | NocabWang(培根) | [Codepen](https://codepen.io/PeihanWang/pen/eYwgRBO?editors=0100) |
| 16 | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/KKjaqqL) |
| 17 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/GRbrEyd?editors=0100)|
| 18 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/QWXdgaP) |
| 19 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/abgpwrW?editors=0100) |
| 20 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/RwzKgMM?editors=1100)|
| 21 | 泊岸 |[Codepen](https://codepen.io/qoq77416416/pen/BagpdGo?editors=1100)|
| 22 | kawa | [Codepen](https://codepen.io/z83xji6/pen/rNEjGrR) |
| 23 | Mike | [Codepen](https://codepen.io/mike2049/pen/eYwgemw) |
| 24 | PoWei | [Codepen](https://codepen.io/Po-Wei-Lai/pen/BagpJBE) |
| 25 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/abgpYdO) |
| 26 | lunlun0514 | [Codepen](https://codepen.io/f5badapple/pen/abgpYMJ?editors=0100) |
| 27 | brucelee0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/yLdgjXV?editors=0100) |
| 28 | wind | [Codepen](https://codepen.io/wind7y/pen/PorWeMP) |
| 29 | MY | [Codepen](https://codepen.io/ahmomoz/pen/oNrByxr) |
| 30 | 火腿 | [Codepen](https://codepen.io/Ham-Chen/pen/WNqRKNK) |
| 31 | haojing | [Codepen](https://codepen.io/hjxu/pen/gONgoPE) |
| 32 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/abgpQNO?editors=0100) |
| 33 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/ExBZmqx?editors=1100) |
| 34 | Kerwin | [Codepen](https://codepen.io/kerwin/pen/KKjaJEB) |
| 35 | Jim | [Codepen](https://codepen.io/JimChou/pen/bGPqbzY?editors=0100) |
| 36 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/ZEdeYbW?editors=0100) |
| 37 | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/VwJpYoN) |
| 38 | gavi | [Codepen](https://codepen.io/qbafldcv-the-scripter/pen/NWZpPex) |
| 39 | 俊 | [Codepen](https://codepen.io/jun12079/pen/GRbWrZE) |
| 40 | Anna |[Codepen](https://codepen.io/Anna-Teng/pen/jOjBzoo)|
| 41 | yaoling.liang |[Codepen](https://codepen.io/Yao-Ling-L-/pen/VwJpqXB)|
| 42 | Theodore2024/0802 |[Codepen](https://codepen.io/GustavoFringgg/pen/Rwzpdgp?editors=0100)|
| 43 | chris | [Codepen](https://codepen.io/chrischen666/pen/dyBWMxy?editors=0100) |
| 44 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/dyBRvxm) |
| 45 | Joanne hu | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/ExBXQQQ?editors=1100) |
| 46 | xcx100 | [Codepen](https://codepen.io/c13026/pen/VwJWxbW) |
| 47 | EdHunag | [Codepen](https://codepen.io/yide1986/pen/JjQJvMb) |
| 48 | glen_69515 |[Codepen](https://codepen.io/glenyaochih/pen/YzoQRey)|
| 49 | Amy(咂摳) |[Codepen](https://codepen.io/nnxucgmc-the-builder/pen/eYwRxgg?editors=1100)|
| 50 | jasonlin | [Codepen](https://codepen.io/gfswkraq-the-reactor/pen/abgyMMx) |
| 51 | Toung | [Codepen](https://codepen.io/Toung/pen/QWXMPdx)
| 52 | Arvin | [Codepen](https://codepen.io/arvinyang1925/pen/vYqeGLd) |
| 53 | emmayo | [Codepen](https://codepen.io/emmayo/pen/poXWLzb) |
| 54 | Emma | [Codepen](https://codepen.io/Emma0919/pen/yLdzxJE) |
| 55 | jerry_66983 | [Codepen](https://codepen.io/Barry-C/pen/bGPYmqx) |
| 56 | 野鴿 | [Codepen](https://codepen.io/HoshinoSyouta/pen/rNEJzMY?editors=0100) |
| 57 | Enn | [Codepen](https://codepen.io/enntang/pen/VwJXPOx) |
| 58 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/mdZxgPQ) |
| 59 | 小翎 |[Codepen](https://codepen.io/debbielin/pen/zYVjXME?editors=0100)|
| 60 | OSN |[Codepen](https://codepen.io/osncodepen/pen/RwzBxQQ)|
| 61 | tung | [Codepen](https://codepen.io/ru-ching/pen/dyBgRoQ) |
| 62 | 深海 | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/vYqQbOx) |
<!--
| No | Discord | [Codepen]() |
-->