> 時間：2023/8/2 20:00
> 主題：[第四週小組任務](https://hackmd.io/4JdNVfy0SpmAaS3xs3cm1g)

**組員參與名單(10/ 11)：**

- [x] +7
- [x] Jacky7035
- [x] 銀光菇
- [x] kulimusoda
- [x] SKey#9905
- [x] 雪維
- [x] PatrickPie#1112
- [ ] Robbie
- [x] effie____
- [x] miamia_5362
- [x] Sonia Wu
---
## 任務一：請觀看 Vite 影片，並整合眼鏡形象官網

請觀看第[第四週透過 Vite 部署網站流程](https://courses.hexschool.com/courses/20201122/lectures/40549174)章節後，將眼鏡形象官網透過 Layout+EJS 來整合，並在回報中提供參與討論組員的 Git Repo 與 GitHub Pages 網址

| 組員 | Git Repo | GH Pages |
|:------------ | ---- | ------ |
|Sonia Wu | [Git Repo](https://github.com/yujouwu/week4) | [GitHub Pages](https://yujouwu.github.io/week4/index.html) |
| jacky7035 | [Git Repo](https://github.com/adens123/2023-layout-bootcamp-week3) | [GH Pages](https://adens123.github.io/2023-layout-bootcamp-week3/) |
| PatrickPie | [Git Repo](https://github.com/patrickpie83/hex_week3_RWD) | [GH Pages](https://patrickpie83.github.io/hex_week3_RWD/) |
| effie____ | [Git Repo](https://github.com/effie77777/HW-week4) | [GH Pages](https://effie77777.github.io/HW-week4/) |
| 銀光菇 | [Git Repo](https://github.com/Gingene/2023hexschool-webdesign-project4) | [GH Pages](https://gingene.github.io/2023hexschool-webdesign-project4/) |
| Yu | [Git Repo](https://github.com/yuch3nchen/2023-hexschool-glasses-website) | [GH Pages](https://yuch3nchen.github.io/2023-hexschool-glasses-website/) |
| SKey#9905 | [Git Repo](https://github.com/chenskey/week4Homework/tree/main) | [GH Pages](https://chenskey.github.io/week4Homework/) |

<!-- 方便複製

| 名字 | [Git Repo]() | [GH Pages]() |

-->

## 任務二：觀看 SCSS 結構，討論組員彼此間該如何逐步規劃 SCSS
* [2014 MOPCON](https://github.com/gonsakon/mopcon2014/blob/master/sass/all.sass)
* [2018 The F2E](https://github.com/gonsakon/theF2EPK/blob/master/source/sass/all.sass)
* [Bootstrap](https://github.com/twbs/bootstrap/tree/master/scss)

### 分享截至目前學習sass的心得(分享者：Jacky7035)
> Youtube Sass系列影片：
> [SASS Tutorial (Build Your Own CSS Library)](https://www.youtube.com/playlist?list=PL4cUxeGkcC9jxJX7vojNVK-o8ubDZEcNb)

#### 1. 分三個階段：
(1) scss階層式寫法
(2) 依照7+1設計模式分類
(3) 客製化自己的utilites(pl-2, mr-5, fz-2...)和格線系統(col-2, col-lg-2, col-md-3...)

#### 2. 建議先熟悉scss階層式寫法再往後

#### 3. 將單一scss檔依照7+1設計模式分類，切分資料夾和檔案，看專案大小，不一定會用到全部分類，常用的分類和對應的scss檔名稱：
(1) base：_base.scss, _reset.scss
(2) utils：_utils.scss, _variables
(3) pages：_index.scss
(4) layout：_breakpoints.scss, _grid.scss, _header.scss, _footer.scss
(5) components：_button.scss, _card.scss, _navbar.scss
> 可參考：[Sass 7-1 Pattern]( https://gist.github.com/rveitch/84cea9650092119527bc)

#### 4. 客製化utilities和格線系統(類bootstrap方式)，可以直接套用在html的class
(1) 把設計稿看過一遍，統計會用到的padding、margin、font-size、color..
(2) size通常是4或8的倍數
(3) padding、margin和格線多做斷點(RWD)的元件
(4) 數量較多的元件利用變數和loop產生，例如padding、margin、格線系統、font-size
(5) 其餘尺寸在切版遇到時再決定是做成utilities還是另外寫scss

:::info
**補充：**
　尺寸單位改用rem時，可以在html tag設定font-size為62.5%，預設為16px，1rem = 16px，
　16 * 62.5% = 10px，1rem = 10px，比較容易把px換算為rem。

html {  font-size: 62.5%; }

例如：
16 px = 1.6 rem
48 px = 4.8 rem
80 px = 8 rem

:::

## 附錄：討論截圖