# 第四週｜SCSS 小組任務 Team1
###### tags: `2021程式體驗營` `TeamWork_Week4` `team1`
**組別**：第一組
**參加組員**：Sz, Jiang V, Anita, Summer.H, Xing

[直播講義｜第四堂：SCSS 切版任務(補充資源很多可以參考)](https://hackmd.io/Axk6RCnEQkq1TTzujKw80w)
[任務繳交區](https://hackmd.io/@hexschool/H1mE4lk2_)
完整討論內容記錄在：[本次討論白板](https://app.tryeraser.com/workspace/XFhXiFWoM4gKXzODSVF5)

# 第一題 - 討論香水電商版型攻略

請討論你的 SCSS 版型，想朝 LV 幾試試看，並先嘗試你要做的 SCSS 結構，透過小組力量一起解除疑惑！

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

以上是我們的願望，有務實的Lv3 ，多位眼光Lv5，成品Lv不知道

## LV1｜擬定 pages 架構

* _index.scss
* _products.scss
* _theProduct.scss
* _login.scss
* _member.scss

## LV2｜拉出 Base, Layout 全域設置與共通佈局

### Base：找出基本元素的共通基底
### Layout：換頁不受影響的表頭表尾
集思廣益，想一下可能會出現在這裡面的內容

## LV3｜拉出 helper(util) 到哪都好用的工具們

運用 SCSS 的加減乘除運算、`rem`等相對單位，建立好維護的工具們
搭起設計師與工程師友善的橋樑XD
可能會想用用 `@mixin`？
做了一些討論，但mixin內容要不要放在 helper ，或是:hover 之類的設定不太確定應該去哪，視網站可能會先獨立出去

## LV4｜拉出 Component 自成一國的元件們

你已經是個成熟的元件了，樣式自己管好
運用 SCSS 的 `{}` 的 `&` 連結符彼此認親
集思廣益大家看過的 component，釐清一些疑惑，還有覺得哪些好用的

>sidebar 在後台可能會寫在 layout
>[name=Jiang V 分享][color=#A7E683]

>之前寫的 bs card：https://codepen.io/wan-chine/pen/jOmNyqR
>[name=Summer.H 分享][color=#F5697A]

## LV5｜整合大型框架([Bootstap 5](https://bootstrap5.hexschool.com/docs/5.0/getting-started/introduction/))

理解如何使用框架（崩潰的第一步）
客製化框架（我是誰我在哪）
基於框架之上自訂變數（我該不該停手了）
只取自己要的內容（有夢好美）

就算我們，寫 BS5 寫得亂七八糟
相信這個心情，記錄下來是有意義的，有沒有很符合體驗營的主旨
plugin 使用前請先詳閱公開說明書，還有燒香拜拜，整個 BS 丟進去編譯有當掉風險
prepros 主流大獲勝

>
>有謎因就是讚！！！還支援繁中！！！
>scout 謎因真的很可愛，推薦完有組員考慮用XD
>[name=Sz 分享][color=#BB84F5]

討論了一下變數大家的改法，有新寫 css 蓋過去的，也有從原始 Bs 的變數檔案去改的，也有拉新檔案出來蓋預設的
也討論了拉出來改有多麻煩

# Github 補充
>[分享自己的架構＋怎麼用終端機上傳資料](https://www.figma.com/file/1WoapeLpFK5EU2FHUiQUlj/SCSS?node-id=0%3A1)
>[name=Jiang V 分享][color=#A7E683]

# BS 引入步驟
編譯 [BS5 SCSS](https://github.com/twbs/bootstrap/tree/main/scss) 載入本體 SCSS
> 1. 建立專案資料夾，建立一個SCSS檔案，檔案內再建一支 all.scss
> 1. 步驟一：下載 GitHub 原始檔，抓取[最新版](https://github.com/twbs/bootstrap/tags) 、[第5版 v5.0.2 source code](https://github.com/twbs/bootstrap/releases/tag/v5.0.2)
> 1. 步驟二：下載完之後，拉出下載完資料夾裡面的 scss 資料夾，改名為 bootstrap 資料夾 ，複製下來放到自己專案的 SCSS 資料夾
> 1. 步驟三：整合到自己的 SCSS，記得link到自己設定的css路徑 ex .css/all.min.css or .css/all.css
> 2. 在 all.scss 載入 自己專案內bootstrap資料夾內的bootstrap.scss -> 寫法是 @import "bootstrap/bootstrap"
> 3. 以此方式就不用在載入 bootstrap 的 CDN
> 4. 另也可用終端機 $ npm install bootstrap
>[name=Jiang V 分享][color=#A7E683]

# 開會截圖
這週也很 chill
然後開完會太容易忘記講了什麼了，這次再加入[討論白板](https://app.tryeraser.com/workspace/XFhXiFWoM4gKXzODSVF5)大家一起寫