(3) Bootstrap 5 筆記

以Bootstrap來說這麼大的框架原始檔案會是由許多小元件組成。

但是這個別的檔案並無法被瀏覽器所解析，透過Sass編譯器能夠將這些小元件組成完整的CSS，並且能夠在瀏覽器運行。

比較常用到的 bootstrap 有表格、表單、api 和 helpers。

如何使用 Sass 操作 Bootstrap

1. 將 node_moduels 裡面的 _variable.scss 複製
2. 放到 stylesheets 資料夾中，新增一個資料夾叫做 helpers
3. 修改 _variable.scss 裡的變數就可以使用

all.scss 檔案裡，可以參照官方文件。也可以針對只想載入的部分進行載入。

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

// 1. 完整載入bootstap 5
// @import "../node_modules/bootstrap/scss/bootstrap";

// 2. 客製化載入
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/utilities";

當需要特別調整某些元件的使用方法時，需要查詢官方文件。

如何產生獨立的元件

在 stylesheet 下新增 components，這裡的元件是可以重複利用的，以按鈕來說 裡面可以寫

.btn-custom-hex{
    @include button-varient(#69F0AE,#69F0AE)
}

就不需要到原始碼裡面改內容。

scss 需要注意的事情

1. 不要過多層級(巢狀)
2. 盡可能使用變數