正在寫六角學院的Bootstrap作業，今天就來記錄如何修改變數吧。

首先用npm下載Bootstrap套件，安裝好後出現node_modules資料夾，裡面的Bootstrap如果沒有指定版本，應該是4.5.2版。

npm install bootstrap

想要下載目前還是alpha版的5.0.0可以依照Bootstrap官網的教學，使用：

npm install bootstrap@next

如果沒有要用gulp之類啟動，只是單純使用Bootstrap的內容，直接建立一個scss資料夾，並建立all.scss檔案，就可以開始使用。

依照官網的教學，先引入所需的套件，上面三個是必要的，其他就看自己的需求加入。

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

放入@import後把variables.scss的位置改成自己設定的，就可以開始修改啦。

@import "helpers/variables";

首先來看顏色的修改，可以直接修改掉變數，例如

$primary:       $blue !default;
$secondary:     #EAF0ED;//$gray-600 !default;

或是直接新增在$theme-colors內

$theme-colors: map-merge(
  (
  (略)
    "dark":       $dark,
    "accent":   #8DA291,

  ),
  $theme-colors
);

使用方法和其他BS標籤一樣，如果有安裝VSCode套件，使用時會自動出現在選單上：

<button class="btn btn-accent">這是按鈕</button>

再來試試看修改間距，先看原始設定：

$spacer: 1rem !default; //16px
$spacers: () !default;
$spacers: map-merge(
  (
    0: 0,
    1: ($spacer * .25),  //4
    2: ($spacer * .5),   //8
    3: $spacer,          //16
    4: ($spacer * 1.5),  //24
    5: ($spacer * 3)     //32
  ),
  $spacers
);

直接修改成所需的數字，可以一直往下設定。

$spacers: map-merge(
  (
    0: 0,
    1: 10px, //($spacer * .25),
    2: 15px, //($spacer * .5),
    3: 20px, //$spacer,
    4: 30px, //($spacer * 1.5),
    5: 40px, //($spacer * 3),
    6: 45px,
    7: 50px
  ),
  $spacers
);

使用在標籤上，等於推移50px

<div class="container mt-7"></div>

其他部分就視需求修改，例如 navbar的上下間距和選項間的距離：

$navbar-padding-y:      30px; // $spacer / 2 !default;
$navbar-nav-link-padding-x:         30px; //.5rem !default;

如果單純修改變數無法滿足排版需求，就需要自訂元件或另外增加CSS或JS。