---
tags: 大學生體驗營 - 2021 夏季班
---
# BS5 SCSS 客製化

* [實習申請表單](https://docs.google.com/forms/d/e/1FAIpQLSefGDnaWhN5XkrC1XAICKS5Sr1ICQ4dQ3MIv9veRz5lpxWDTA/viewform) - 適合有意往網頁設計師、前端工程師發展的學生

## BS5 SCSS 下載流程

* [原始檔案下載](https://bootstrap5.hexschool.com/docs/5.0/getting-started/download/#source-files)

## 客製化流程步驟
1. 下載 Bootstrap 原始碼
2. 將 Bootstrap SCSS 拉近自己的 SCSS 資料夾
3. 新增 `_index.scss、_faq.scss`
4. 將架構用成如下結構

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

5. 將 index.html 上的 CSS 換成本地端 all.css

> 有時編譯可能會慢些或當掉，可以重開試試
## SCSS 架構

* 藍色區塊為客製化新增


## 調整 CSS 編譯位置

"liveSassCompile.settings.formats": [
    {
      "extensionName": ".min.css",
      "savePath": "/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 上