第 20 集：Bootstrap 客制化 Sass variable

此篇分享着重在介绍 _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：响应式文字设置（随着视窗大小计算适合的尺寸）。

如何实作：

通常会使用 if 判断式 来针对某种特定样式做设置。

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;