###### tags: `21 天 Bootstrap 5 新手實戰營`,`SASS`
# Bootstrap5_w4筆記(實作設定sass)

## 客製化sass流程
1. 建立一個資料夾(ex:project)
2. 在資料夾中建立一個index.html檔案
3. 在資料夾中建立一個scss資料夾=>裡面放一個all.scss檔案
在all.scss檔案中隨意寫入樣式，測試是否會成功編譯成css檔案
(事先須安裝vscode套件live sass compiler)
4. 在scss資料夾中新增_index.scss和_faq.scss(檔名加下底線不會被編譯)
* **在all.scss中import檔案

@import "index";
@import "faq";

5. 至官網下載 Bootstrap 原始碼
* [選擇Source files : download source](https://getbootstrap.com/docs/5.0/getting-started/download/)
把scss資料夾改名成bootstrap
把改名後的bootstrap資料夾放到自己專案的scss資料夾中
* **在all.scss中import檔案
@bootstrap/bootstrap**

6. 所以all.scss檔案中架構如下結構:

@import "bootstrap/bootstrap";
@import "index";
@import "faq";

**注意檔名不用加上scss**
**注意自身路徑位置**

* 權重一樣的時候看先後，所以在**all.scss**中須注意import順序

7. 編譯出新的css檔就會有
bootstrap/bootstrap
index
faq
all.scss
的內容


* 可以嘗試在每個待編譯的scss檔中寫樣式，看是否有成功編譯置all.css中

## SCSS 架構

* 藍色區塊為客製化新增


## 修改link css的位置
在index.html檔案上
把原本cdn改成自己編譯後css的位置

## _variable.scss 詳解

1. 修改主色、輔助色: 81 行 `$theme-colors`
2. 修改按鈕文字顏色：新增客製化 SCSS
3. [Google font 載入教學，與整合 Bootstrap ](https://hackmd.io/@YmcMgo-NSKOqgTGAjl_5tg/ryar-vGOd/%2FbvLKze7nRU6kOa2jZxXDIg)

> 從上到下的順序為 色系 > Options(預設樣式)> Spacing(間隔)> Body > link (連結) > breakpoints(斷點)

> 若不確定如何新增，可先寫在自己的 SCSS 上
EX:照頁面區分

### 色系 theme-colors
* theme-colors
修改顏色，系統會自動補上各種class名稱(ex:btn-primary/border-primary/text-primary)


* 也可以自行額外新增名稱變數
* 變數命名方式
1. 亮暗(EX:darkgray/lightgray)
2. 如果同一個色系很多種顏色可以用=>百分比(EX:gray-100/gray-200/gray-300/gray-900)

### 預設樣式 options

* 圓角 enable-rounded
* 陰影 enable-shadows

### 間距 spacing
預設1是 1rem/4=4px
mb-1(margin-bottom:4px)


可以自行修改間距大小，也可以新增新的，所有跟距離有關的都會吃到此設定。
mb-6
也支援斷點mb-md-6

### body
預設背景顏色
文字顏色


也可以自行寫通用類別在_index.scss
.darkgary{
color:
}

或是再建立一個檔案 _golbal.scss，把常見的放在裡面
自己分類，最後在全部import到all.scss檔案中一起編譯成css檔即可。


> 主色輔助色用bootstrap修改，其他可以自行分類調整。

### link
文字連結顏色 記得要修改$primary的顏色
或是預設要不要下底線

### breakpoints

### hover
追蹤專案按鈕hover後顏色變化
新增class: bg-hover-primary


## 調整 CSS 編譯位置
* 檔名
* 位置

"liveSassCompile.settings.formats": [
    {
      "extensionName": ".min.css",
      "savePath": "/css/"
    }
  ],

## 關於文字斷點的部分
因為原本預設sass的文字是沒有斷點的，需於 _utilities.scss調整以下設定

## 參考資源
[六角學院 Bootstrap5新手教學實戰營](https://www.youtube.com/watch?v=lZgMbStOy0I&list=PLYrA-SsMvTPOX9oF6ld9RGwWlo7PceI_P&index=7)