Sass、SCSS 小試身手

恭喜你完成此章節,接下來我準備了一份程式碼,請您試著挑 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;
}


問答區

${ fixTime } 六角發問系統維護中 ...

維護期間無法發問與回覆問題哦