---
tags: 2021 程式體驗營
---

# 第四堂：SCSS 切版任務
本門直播課將於 6/23(三) 20:00 開始！，進入[直播間](https://rpg.hexschool.com/training/22/show?embedhm=Uuk0KDvYRNeYgL7b24Pbqw)。

## 快報
1. 新增[任務 - 體驗營心得感謝牆](https://rpg.hexschool.com/training/22/task)，6/30 中午 12 點結算作業積分達到 10,000，延長一個月觀看課程
2. 3 天 66 折快閃優惠，將於週四 21:00 透過 Line@ 推送，可先訂閱[專屬推播](https://r.botbonnie.com/ootR-)

> 週四 21:00，將開啟 66 折專屬優惠[連結](https://www.notion.so/gonsakon/3-66-608cee81dd0c489390e5ed1975be40f0)

## 小組排名
第一名：[1](https://hackmd.io/@6If-6QKFTkmDCVJjm4Ndzg/2021hexshcool-camp-team1-w3)、[16](https://hackmd.io/bdPpJ9LpSNyGo19BaRZPIA?view)、[18](https://hackmd.io/@YIHQx96xTI-K9vDjhzEfDA/BJNuQONoO/https%3A%2F%2Fhackmd.io%2F%40YIHQx96xTI-K9vDjhzEfDA%2FHyKUV9wsO) 組
第二名：[11](https://hackmd.io/@willy83310/rJQplfAcu)、[7](https://hackmd.io/@tel1QbHlStm6HsLLcna8xw/By9bucgiu)、[20](https://hackmd.io/@lintiin/rJKry9kjd)、[10](https://hackmd.io/@gmincc/BylZ_ZPiu)、[4](https://hackmd.io/9IPoE2p0SmeWVv4mZKusBw)、[17](https://hackmd.io/5aitA9NhSTipBce1KaDk1Q)、[14](https://hackmd.io/p3nmMpDaRiejP_wb-6HyGQ?view) 組
第三名：2、6、9、13、15 組

## 講義

1. SCSS import 環境設計
2. 講解去年[切版班架構](https://www.notion.so/66979b4a96f24a4cbbf14fd802ed59be?v=5bef73ef36c444b5817fdb8b0b1522fe)

## 香水電商架構範例

> 洧杰老師備註[連結](https://rpg.hexschool.com/training/15/task)用
## LV1

有用 pages 分 SCSS，例如 index.scss、product.scss，有 base.scss

| 姓名 | 原始碼 | 線上觀看連結 | 備註 |
| --- | ----- | ---------- | --- |
| 孫若桓 | [SCSS](https://github.com/CastleSun/HexSchool-CSS-Week6/tree/main/scss) | [Demo](https://castlesun.github.io/HexSchool-CSS-Week6/) | 有單獨抽出 base、variable 檔案，頁面有簡單分 index、login
| 鱈魚好吃 | [SCSS](https://github.com/Takaka1st/week6/tree/main/scss) | [Demo](https://takaka1st.github.io/week6/) | 有簡單拆出 index 跟 product 的頁面樣式 |
| Kelvin Chan | [SCSS](https://github.com/kelvin-88/hexshool-webLayoutTraining-week6/tree/main/app/assets/style) | [Demo](https://kelvin-88.github.io/hexshool-webLayoutTraining-week6/) | 只做首頁跟商品頁，有用 page 資料夾分頁面 |
| 蔡志宏 | [SCSS](https://github.com/ernest0713/week6-mission-perfumeStore/tree/main/app/assets/style) | [Demo](https://ernest0713.github.io/week6-mission-perfumeStore/index.html) | 只做首頁跟產品列表，頁面有各自用單獨的 scss 分開 |
|ABow_chen|[SCSS](https://github.com/fred39392001/WebLayout_Week_06/tree/main/scss) | [Demo](https://fred39392001.github.io/WebLayout_Week_06/) |只做首頁跟產品頁，單純分 index 跟 base |

## LV2

會拆分出 layout 資料夾、有一些元件的概念

| 姓名 | 原始碼 | 線上觀看連結 | 備註 |
| --- | ----- | ---------- | --- |
| 陳義興 | [SCSS](https://github.com/atmpchk/cssTrainingCourse-week6/tree/main/app/assets/style) | [Demo](https://atmpchk.github.io/cssTrainingCourse-week6/) | 大部分拆分的觀念感覺上都很 OK 沒太大問題，可能就 btn 會建議放到元件 |
| 林修平 | [SCSS](https://github.com/shoppingqhex/shoppingqhex.github.io/tree/master/web_layout/w6/app/assets/style) | [Demo](https://shoppingqhex.github.io/web_layout/w6/) | 這個 SCSS 拆分的很細 |
| 鵬聖 | [SCSS](https://github.com/dstsidragon/CssOnLineClass_SixMisson/tree/main/app/assets/style) | [Demo](https://dstsidragon.github.io/CssOnLineClass_SixMisson/dist/) | 拆分觀念很 OK 不過變數放在 base 裡，可能建議變數放在 helper 裡會比較好 |
| 程宥勳 | [SCSS](https://github.com/yosontw21/perfume-shop/tree/main/app/assets/style) | [Demo](https://yosontw21.github.io/perfume-shop/) | 拆分觀念 OK |

## LV3

有一顆星評價，有些有用到 Bootstrap 覆蓋概念去設計，[BS SCSS 架構](https://github.com/twbs/bootstrap/tree/main/scss)

| 姓名 | 原始碼 | 線上觀看連結 | 備註 |
| ---- | ----- | ---------- | --- |
| 李依潔 | [SCSS](https://github.com/umon752/week6_D-PERFUME/tree/main/app/assets/style) | [Demo](https://umon752.github.io/week6_D-PERFUME/index.html) | 一顆星，用下底線命名與 BS 區隔，元件部分是用 modules 資料夾 |
| 徐純純 | [SCSS](https://github.com/chunchun126/perfume_shop/tree/main/app/assets/style) | [Demo](https://chunchun126.github.io/perfume_shop/index.html) | 一顆星，用下底線命名與 BS 區隔，layout 部分是用 navbar 當 header |
| chiayu tsai | [SCSS](https://github.com/chiayutsai/perfume/tree/main/app/assets/style) | [Demo](https://chiayutsai.github.io/perfume/) | 兩顆星，用 BEM 命名法與 BS 區隔，BS 變數的客製化 spacing 部分很不錯 |

## 給體驗營建議的學習方向

1. LV1：每個頁面都切出 page.scss
2. LV2：嘗試將共用的 Layout 佈局拆出來，以及全域 base 設置
3. LV3：將常用的工具型 class 拆出來，例如 .mb-1
4. LV4：把常用區塊拆出來，例如 button、card.scss
5. LV5：嘗試整合大型框架(bootstrap 5)，納入自己的架構

## 延伸學習

1. [CSS/SCSS 架構演化史影片](https://www.youtube.com/watch?v=YF2yKIT5QS4)、[簡報](https://drive.google.com/file/d/1i1O-2HwGa6dUYLWMDiqmFBQCtcSzIdvc/view?fbclid=IwAR3Os838FGh2TD7fTAx4fpcB--OAzIMoHiimhQCi9WyuehkO30Ewii6PLmc)
2. [CSS/SCSS 優良部分 - 30 部影片](https://ithelp.ithome.com.tw/users/20040221/ironman/3567?fbclid=IwAR2JANwzCOcNdUjlpB2GCicCGjmbTphATiVwNqpWrnHfGqffjYGuG13sBy8)

### 抽獎表單

1. [抽獎連結](https://forms.gle/7nGE1nN9XkNTWUez8)