---
# System prepended metadata

title: ':muscle:切版直播班第 3 組 --- 第 4 週討論區'
tags: [第三組, 網頁切版直播班 - 2022 夏季班, 春季班, 六角學院]

---

:muscle:切版直播班第 3 組 --- 第 4 週討論區 
===

###### tags: `網頁切版直播班 - 2022 夏季班` `第三組` `春季班` `六角學院`

:::success
**小組討論時間：2022 年 07月 31 日 週日 晚上 7:00**
:::
<style>
    .gray{
        color:gray;
    }

</style>

## :point_right:簽到區
<!-- :heavy_check_mark: -->

| 組員名稱        | 報到               |
| --------------  | ------------------ |
| MOMO#3370       |:heavy_check_mark:  |
| 布魯諾#7239      | :heavy_check_mark:|
| Amber Hsin#6633 |                     |
| 鯨魚#8376        |                     |
| RayChen#6088    |:heavy_check_mark: |
| 小樽#3151        |:heavy_check_mark:  |
| 柏PO#5617       |:heavy_check_mark: |
| 瑞追#8227        |:heavy_check_mark: |
| 周周#3503        |:heavy_check_mark: |
| 粉蒸肉#6214      |:heavy_check_mark:  |

---


## :bomb:小組討論

### 剛開始討論，確認大家的情況
:::spoiler <font color="blue">**討論內容(請點我)**</font>
![](https://i.imgur.com/C06Sjz9.png)
![](https://i.imgur.com/lzf8xAB.png)
![](https://i.imgur.com/CWGYSNR.png)




:::


### 任務一：請觀看 Gulp 影片，並整合眼鏡形象官網 
請觀看第第四週透過 Gulp 部署網站流程章節後(觀看連結:https://courses.hexschool.com/courses/20201122/lectures/40549174 )，將眼鏡形象官網透過 Layout+EJS 來整合，並在回報中提供參與討論組員的 Git Repo 與 GitHub Pages 網址
|Discord ID| GitHub Repo, Page|
|-----|-----|
|布魯諾#7239| [GitHub Repo](https://https://github.com/Bruno-Yu/week3_practice.git) [GitHub Page](https://https://bruno-yu.github.io/week3_practice/) |
|瑞追#8227|[GitHub Repo](https://github.com/OwLu0905/week4-group-gulp) [GitHub Page](https://owlu0905.github.io/week4-group-gulp/)|





---

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

上一梯學長姐
1. [Vicky 學姐](https://github.com/peggyted0129/HexSchoolTraining/tree/main/week4gulp/scss)
2. [carrie 學姐](https://github.com/echocarriet/layoutWeek4)
3. [chiayutsai 學姐](https://github.com/chiayutsai/week4_glasses)
4. [東京自耕農學長](https://github.com/overactive1988/lesson3_homework/tree/master/src/css/css/_include) 




:::spoiler <font color="blue">**討論內容(請點我)**</font>
<br>

### 1. 小組組員討論前準備:
![](https://i.imgur.com/6YoBPiD.png)

### 2. 小組組員共同規劃SCSS導入分類與順序:
![](https://i.imgur.com/7yt5y9f.jpg)


### 3. 小組討論重點畫面節錄: 
>會前調查

![](https://i.imgur.com/iMAnpt7.png)
#### 3-1 任務一，gulp環境討論
>[name=瑞追#8227 分享][color=#F5697A]
>>問題: 想問一下使用vue也會用到gulp這東西嗎?
回覆: vue cli 本身就引入webpack 作為前端的打包工具，不需要再使用gulp 

![](https://i.imgur.com/A0CHaDj.png)




#### 3-2 任務二，眼鏡官網版型討論
> 共用的layout說明 (主要是共同使用的版型，以作業來說就是header與footer)

![](https://i.imgur.com/Fmm1Gpz.png)

>**Gulp 環境建置介紹**

![](https://i.imgur.com/mqS78wN.png)

>**EJS 樣板功能介紹**

![](https://i.imgur.com/wMNq2qS.png)

>**2014 MOPCON 討論**

![](https://i.imgur.com/EY2aOt0.png)
```SCSS
@import compass/reset => 應類似 CSS 的 reset功能
```

>**問題交流**


>[name=瑞追#8227 分享][color=#F5697A]
>>**問題**:想問一下partial / button.scss/ .btn 裡面有些前面有 * 是什麼意思?

>[name=周周#3503 分享][color=#F5697A]
>> **回覆**: 該符號是設定全域標籤的意思

> **補充回覆**: 這部分如周周所描述， * 是全部標籤的意思，這邊附上html,body,以及 * 的[差異文章說明](https://www.quora.com/What-is-the-difference-between-HTML-and-body-elements-in-CSS-Resets)基本上是 html >body > * 

![](https://i.imgur.com/qfIhBK4.png)
 
>**2018 The F2E 討論**

![](https://i.imgur.com/9lfpfVy.png)

![](https://i.imgur.com/G9pV3UP.png)


>**PureCSS 討論分享**

>[name=瑞追#8227 分享][color=#F5697A]
>>https://purecss.io/


> **問題交流**

>[name=柏PO#5617 分享][color=#F5697A]
>>**問題**: gulp寫還要設定一些，為何不直接寫Tailwind就好? 
**回覆**: gulp是前端打包工具，Tailwind是樣式框架，兩種是不同的東西，難以互相比較

![](https://i.imgur.com/24qIN5F.png)


>[name=周周#3503 分享][color=#F5697A]
>> 我想請問大家斷點~會另外用992px ? 因為設計稿只有768px 跟 375px ?

![](https://i.imgur.com/xQaLLc9.png)



### 3-3 小組SCSS結構討論與分享
 
> [name=粉蒸肉#6214 分享][color=#F5697A]

![](https://i.imgur.com/wHMv77B.png)

![](https://i.imgur.com/rVD8Ud3.png)

![](https://i.imgur.com/HkJAqHi.png)


> [name=周周#3503 分享][color=#F5697A]

![](https://i.imgur.com/3ovXeKQ.png)

![](https://i.imgur.com/7uv7GXG.png)

![](https://i.imgur.com/a7gFfxF.png)


> **共用版型小組討論**

![](https://i.imgur.com/7yt5y9f.jpg)


> **問題交流**

>[name=MOMO#3370 分享][color=#F5697A]
>>**問題**: 不好意思問個 用tailwind的話 還需要做這些分割檔嗎?
>>**回覆**: sass 分割的主要目的是方便提取出共用樣式( 樣板、元件、容器... )，以及方便後續的維護與管理，但tailwind 已拆分到分子等級 ( 基本上拆到與css屬性差不多了，不用再另外自己寫css內容 )，其宗旨是希望減少類名(class)的使用，也就是為什麼說tailwind是utilties first 的理由，所以若想自訂，大多是些數值/顏色的調整，這邊直接使用extend 再做補入就好囉 ([詳細介紹可參考這篇](https://tw511.com/a/01/42894.html))

![](https://i.imgur.com/MApET7e.png)


:::


---


  
