---
tags: 網頁切版直播班 - 2021 夏季班
---

# 檢核點 - 第四週

**重點觀念：**
1. RWD 設計
2. Gulp 使用
3. SCSS 寫法
4. 使用 ejs 做樣板

**回覆參考：**

**注意：**

若助教被分配到第四週任務，需要去看同學的第三週是否有提交：
1) 若有提交可以看第三週提交的是什麼頁面，第四週就不再重複批改
2) 若沒有提交就需要提醒他沒提交會影響完課率，所以須提交，且標注是和第四週一起提交

---

**SCSS 檢核點**
1. 是否有善用巢狀寫法
錯誤寫法：

    .header{
     .menu {}
     .menu li {}
    }

正確寫法

    .header{
     .menu {
      li{}
     }
    }

1. class 階層是否超過 5 層

錯誤寫法：

    .wrap .header .menu li a span

正確寫法：

    .header .menu span

1. 是否有使用 @import，還是 SCSS 都全部寫在 all.scss。可以引導學員用 reset、variable、layout、index、page.scss 的階層來拆分

1. SCSS 位置有寫對
如果是共用的 class，不宜寫在特定的 page.scss 裡面，例如以下範例

index.scss 上，他寫了這個 class，.font-style-xs ，但這 class 很明顯是全站上很多地方都會出現的 class，此時就不宜放在 index.scss 上，比較適合放在 layout.scss，或是獨立一個 site、base、util 等等命名的 class 會比較適合，但不宜放在 index.scss 上

1. 斷點設計
SCSS 上，如果他有直接寫以下 media 寫法，請他嘗試用這兩部影片來優化

mixin 工具篇
載具篇 - @mixin+@content 設計響應式設計超方便

    @media(max-width:767px){
     .header{
         width:50px;
        }
     }

1. 嘗試用資料夾分類管理 SCSS
假使有做很多頁，例如 location、index、faq.scss，那可以用一個 pages 資料夾來歸類，這樣根目錄的 SCSS 結構歸類會比較完善
或者說 layout.scss 比較肥大，也可以多一個 layout 的資料夾，將區塊拉出為 header.scss 與 footer.scss
請依照以上兩點給予建議，如果有寫的不錯的同學，我會再補上給予建議。

附註：SCSS 影音教學補充
prepos 軟體安裝教學
SCSS 寫法
import 檔案拆分
mixin 工具篇
載具篇 - @mixin+@content 設計響應式設計超方便
結構篇 - 如何循序漸進優化網頁架構

---
[2021-08-09]
洧杰老師的批改範本：[2021 切版直播夏季班](https://hackmd.io/48BTVPQVR_y4jq2E0PFHXQ?view)

[2020-11-16]

查看是否有用到 SCSS 的方法：建議直接去該學生的 Github repo ，例如：

學生的作業連結：https://lolo19920228.github.io/liveCourse-layout-fall-week4/

Github repo：https://github.com/LOLO19920228/liveCourse-layout-fall-week4

---

助教新增建議：

*