---
tags: Bootstrap5網頁切版整合術
---
# 9. Bootstrap 與神奇的 Sass
## 1. Bootstrap 與 Sass 的關係
### 什麼是預處理器

* 預處理器:在瀏覽器運行之前進行編譯
* bootstrap使用sass預處理器開發，框架原始檔案是由許多小元件組成，但是檔案並無法被瀏覽器所解析，需透過sass編譯器，將這些小元件組成完整的css並且在瀏覽器上運行

### .scss與.sass差在哪?
* .sass是原始的sass格式，特點是沒有括號、分號，
讓程式碼呈現極簡的風格

* .scss特點是與css相當類似，大多網頁設計師都可以無痛使用


### 為什麼要學預處理器?
#### (1). 變數輕鬆改，樣式千變萬化
讓原有的模組有更多的延伸變化，
有效減少開發時間，更能應付多變得需求。


#### (2). 相同結構重複利用
每次專案都有許多可重複運用的元件、樣式，可收集起來，
不用再重複造輪子，輕鬆愜意創造新花樣


#### (3).前綴詞自動化修正:
那些css目前還需要前綴詞呢?
sass可搭配PostCSS自動完成此功能，假設未來都不需要前綴詞，
也可以自動移除


## 2. 在vscode加入sass開發環境
* 在VSCode安裝套件live scss compiler，右下會出現watch scss
* 撰寫時在all.scss撰寫，透過編譯產生all.css
* html link要設定all.css

## 3. 匯入bootstrap模組及調整情境色
### [直接下載原始檔使用](https://bootstrap5.hexschool.com/docs/5.1/getting-started/download/)
快速開始>下載>原始檔案，若要自行編譯需選擇原始檔
`@import "./bootstrap-5.1.1/scss/bootstrap";`

### 或是用npm下載，需先載入node.js
(1) 在vscode按ctrl+~ 打開終端機輸入 "npm init"，
按enter到最後一行輸入 "npm install bootstrap"，
就會把bootstrap安裝到專案裡



(2) 到官網進入自定義>scss
匯入`@import "../node_modules/bootstrap/scss/bootstrap";`

(3) 打開node_modules>bootstrap>scss>_variables.scss，
新增資料夾"helpr"，另存變數檔案到自己專案

(4) 回到官網 自定義>scss，需先引入functions 才不會出錯

    @import "./node_modules/bootstrap/scss/functions";
    @import "./helpers/variables";
    @import "./node_modules/bootstrap/scss/bootstrap";

### 修改情境色 變數色彩:
* 打開_variables.scss，到 $theme-colors上方，
例如把主色改紫色 "primary": $purple; 存檔完待編譯時，輸出會跳出編譯的訊息

## 4. 讓 Bootstrap 不要那麼肥，手動匯入元件
* 完整的載入bootstrap，若不需要可移除，改用選用方式載入
`@import "./node_modules/bootstrap/scss/bootstrap";`

* 可以用選用方式載入bootstrap:
(1) 到自定義>優化 (Optimize)，保留Configuration、預設值、常用，其他的依專案選用

(2) 從"mixins"到"utilities/api"複製到自己專案，並修改正確路徑，可用滑鼠中鍵選取一次貼上路徑

    // Configuration保留
    @import "functions";
    @import "variables";
    @import "mixins";
    @import "utilities";

    //前三個為預設值
    // Layout & components 
    @import "root";
    @import "reboot";
    @import "type";
    
    //常用    
    @import "images";
    @import "containers";
    @import "grid";
    @import "tables";
    @import "forms";
    @import "buttons";

    // Helpers
    @import "helpers";

    // Utilities
    @import "utilities/api";

## 5. 修改特定的元件的變數
* 到排版>網格>scss，可從文件中看有哪些變數可調整，再到變數檔搜尋
* 建議保留預設，在後面加上"custom"方便日後搜尋

### 範例1: 修改格線系統$grid-columns
修改$grid-columns: 16rem;//12 !default; custom

### 範例2: 修改radius
這裡所有的圓角都會調整到

### 範例3: 修改btn-border-radius
* 可單獨修改btn圓角 btn-border-radius，btn和input設定值建議統一，若有修改btn建議input-border-radius也要一起修改
* card-border-radius改0




### 範例4: 將spacer擴增6、7
通用類別>間距(Spacing)，預設只到5，擴增$spacer6、7


## 6. Bootstrap 隱藏功能開關！
(1) 自定義>選項 (Options)裡面有漸層$enable-gradients，到變數檔搜尋並開啟這功能，改成true
(2) 再回html套用.bg-gradients，有套用到.gradients class名稱的都會開啟

(3) 隱藏功能還有例如下列

$enable-shadows;
$enable-transitions; //漸變
$enable-negative-margins; //負值的margin

## 7. 響應式文字縮放功能
快速開始>rfs，文字會隨裝置寬改變大小，若不需要可到變數檔修正
`$enable-rfs: false;//true !default custom;`


## 8. 自定義通用類別<small>:star: :star: :star:</small>
通用類別>api，有列出有哪些選項可以設定

### 範例: 透明度
* 透明度的設定對照如下，也可用將class名稱改用O,來縮短名稱

### 範例: 自訂bg-cover
1. 複製node_modules>bootstrap>scss>_utilities.scss，
另存到專案資料夾 "helpr" 裡，再到all.scss引入
`@import "./helpers/utilities";`

2. 到_utilities.scss最後面，$utilities之前，替上一個設定補上","
3. 新增background-size，設定完成存檔，就可以將.bg-s-cover或.bg-s-contain、.bg-s-50 套用到html

        "background-size": (
            property: background-size,
            class: bg-s,
            values: (
                cover: cover,
                contain: contain,
                50:50%,
            )
        ),

<small>20820這裡試不出來...</small>
### 範例: 自訂bg-position
新增background-position，設定完存檔，就可以套用.bg-p-center

### 範例: 響應式選項
resopnsive: true，加入就可以使用bg-p-md-center、bg-p-lg-center..斷點

## 9. 使用 Bootstrap 方法，產生獨立元件
1. 前面有提到$theme-colors改變顏色後，所有通用類別都會跟著修改，包含按鈕、背景色等
<small>20820這裡試不出來...</small>

2. 到元件>按鈕>mixins>loops:
若只需單獨使用btn色彩，套用mixins方法來修改，避免產生額外的class

3. 新增資料夾components，新增檔案_custom-btn.scss
在引入`@import "./components/custom-btn";`

4. 自訂名稱.btn-custom-hex、.btn-outline-hex，存檔完成就可以在html使用這class了

## 10. 在 Sass 中，自訂高可用性的元件
元件不夠使用，需自行開發時可自訂，元件的概念就是要能重複使用
範例: stepbar

* 避免過多層級
避免沒有意義的巢狀寫法

* 盡可能使用變數:
* scss新手建議直接把css寫進來再套用變數
* 變數可定義在_variables.scss裡或該檔案上方，變數只會在這檔案用
* 狀態可統一放在最後面

## QA


老師助教好:

請問_utilities.scss，自定義的background-size和background-position定義完，到html套用.bg-s-、.bg-p都吃不到設定，找不到哪裡出錯了? 我的檔案在 再麻煩謝謝~~

原因：bootstrap 5.2版本 新增了map.scss 檔案，導致需要額外再入這個檔案才會有 $utilities-border-colors。

可以嘗試在 @import "../hlper/utilities"; 之前引入 @import "../node_modules/bootstrap/scss/maps";

20220903 哭哭 還是一樣吃不到設定 待助教回覆