---
# System prepended metadata

title: 9. Bootstrap 與神奇的 Sass
tags: [Bootstrap5網頁切版整合術]

---

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

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


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

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

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


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

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




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

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

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

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

## 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安裝到專案裡

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

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

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

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


(4) 回到官網 自定義>scss，需先引入functions 才不會出錯
    ```scss
    @import "./node_modules/bootstrap/scss/functions";
    @import "./helpers/variables";
    @import "./node_modules/bootstrap/scss/bootstrap";
    ```

### 修改情境色 變數色彩: 
* 打開_variables.scss，到 $theme-colors上方，
例如把主色改紫色 "primary": $purple; 存檔完待編譯時，輸出會跳出編譯的訊息
![](https://i.imgur.com/oVAHoRG.png)

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


* 可以用選用方式載入bootstrap: 
    (1) 到自定義>優化 (Optimize)，保留Configuration、預設值、常用，其他的依專案選用
    
    (2) 從"mixins"到"utilities/api"複製到自己專案，並修改正確路徑，可用滑鼠中鍵選取一次貼上路徑  
    
    ```scss
    // 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  
![](https://i.imgur.com/YVvVjfK.png)

### 範例2: 修改radius
這裡所有的圓角都會調整到
![](https://i.imgur.com/79BpfFP.png)

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

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

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

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

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

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

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

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

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


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

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


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

### 範例: 透明度
* 透明度的設定對照如下，也可用將class名稱改用O,來縮短名稱
![](https://i.imgur.com/9bwLmiI.png)

### 範例: 自訂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
![](https://i.imgur.com/0uFxyCW.png) 

    ```
        "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..斷點
![](https://i.imgur.com/BOopG2w.png)


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

2. 到元件>按鈕>mixins>loops:  
若只需單獨使用btn色彩，套用mixins方法來修改，避免產生額外的class
![](https://i.imgur.com/DwMjiuJ.png)



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

4. 自訂名稱.btn-custom-hex、.btn-outline-hex，存檔完成就可以在html使用這class了
![](https://i.imgur.com/thI2wd2.png)

## 10. 在 Sass 中，自訂高可用性的元件
元件不夠使用，需自行開發時可自訂，元件的概念就是要能重複使用
範例: stepbar
![](https://i.imgur.com/h0BnWYa.png)

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

* 盡可能使用變數: 
    * scss新手建議直接把css寫進來再套用變數
    * 變數可定義在_variables.scss裡或該檔案上方，變數只會在這檔案用
    * 狀態可統一放在最後面
![](https://i.imgur.com/H2dDGEE.png)


## QA
![](https://i.imgur.com/ObV9A8Z.png)

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

老師助教好:

請問_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 哭哭 還是一樣吃不到設定 待助教回覆