恭喜你完成此章節，接下來我準備了一份程式碼，請您試著挑 Sass/SCSS 其中一種寫法來進行練習。

需要提醒的地方是，在 class 階層上有改善的地方，可保持一個大原則，類別階層不要超過四層以上，例如 .wrap .header .menu ul li a span:hover，以避免網頁渲染效能有所影響，再請試著調整看看。

練習完後，再請將範例程式碼，貼到 CodePen 上，並在本章節下方的問題區提供你的作業，老師這裡可以再幫你觀看細節是否有優化的空間 :D

.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;
}