此篇分享著重在介紹 _variable.scss 變數介紹，以及如何客製化修改。

事前須看完
Bootstrap 客製化 Sass 必備知識

• 有介紹許多今天範例有用到的語法以及知識點。

Sass 原始碼架構

• 有介紹兩種自定義方式，還不理解的朋友可以先閱讀一下。

此篇會由 _variable.scss 從上到下的順序開始做介紹：

• Color system（色系）
• Options（預設選項）
• Spacing（間隔）
• Position（位置）
• Body
• link（連結）
• Grid（格線系統）
• Components（元件）

Color system

主要作為顏色變數所有設置，分享顏色命名兩種作法．以及 theme-colors 作用。

顏色命名兩種常見作法

• 第一種：3個以下的相近色

解決問題：相近色命名問題（ex：灰色、銀灰、鐵灰）

• 透過 dark、light 來解決。

$gray: #707070;
$gray-dark: #212529;
$gray-light: #6c757d;

• 第二種：多個相近色

解決：多種相近色問題

• 透過 100-900 色階，並選擇直接寫色號或是用 %數 方式來解決。

// 色號
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;

// %數
$blue-100: tint-color($blue, 80%) !default;
$blue-200: tint-color($blue, 60%) !default;
$blue-300: tint-color($blue, 40%) !default;
$blue-400: tint-color($blue, 20%) !default;
$blue-500: $blue !default;
$blue-600: shade-color($blue, 20%) !default;
$blue-700: shade-color($blue, 40%) !default;
$blue-800: shade-color($blue, 60%) !default;
$blue-900: shade-color($blue, 80%) !default;

theme-colors

顧名思義主題顏色，這邊的主題泛指元件若有用到的顏色（ex：btn-color、border-color、background-color、alert）

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
) !default;

主要由各元件產生樣式的語法中，透過 @each 來迭代出 $theme-colors 中的顏色，套用在將元件需要的樣式上。

Options

Options 變數可以當作是 Bootstrap config 設置檔。

常用的參數：

• $enable-rounded：圓角設置
• $enable-negative-margins：負數 margin 設置（開啟後對多產生一套 $spacers 負數值的樣式）
• $enable-rfs：會自動依據 browser viewport 大小，自動計算 CSS 屬性合適的相應值，文件預設是 true，目前 v5.3 版本可以支援 margin、padding、border-radius 和 box-shadow。
  • $enable-rfs 參數控制的是 rfs 是否有作用，如果要針對各別 CSS 屬性開啟 rfs 則可以參考 Utility API 提供的 rfs options 參數（預設是 false）。
  • 目前預設 v5.3 版本 Utilities 通用類別只有 font-size 有設置。

如何實作

通常會使用 if 判斷式 來針對某種特定樣式做設置，下方僅示範 $enable-button-pointers。

ex：button 元件中滑鼠游標的樣式 $enable-button-pointers

// 按鈕在不是隱藏的情況下預設會將按鈕的游標樣式改為 `pointer`。
@if $enable-button-pointers {
  &:not(:disabled) {
    cursor: pointer;
  }
}

Spacing（間隔）

• 間距 size 設置
• 默認 1rem = 16px，可以把 1rem 當作一個單位

3 是中間值，越小就是 < 一單位，越大就是 > 一單位。

$spacers: (
  0: 0,
  1: $spacer / 4,
  2: $spacer / 2,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
) !default;