第 26 集：Bootstrap 客制化 root 变数

此篇会解析 Bootstrap root 是如何自定义生成自己的 CSS 样式。

原始码

使用到两只档案：

_root.scss：主要生成变数样式入口。
_variables.scss：存放变数资料。

Root variables

顾名思义，存在於根部的变数，泛指所有地方都可以使这些变数。

载入顺序

从 bootstrap.scss 原始码档案中可以看出来，root 对於全部 Layout、components 来说是最优先载入的，因为後面样式都可以使用 root 变数。

特性

提供全站皆可使用的自定义 css 变数。
前方加上 bs- 前缀字加以避免与第三方 CSS 发生冲突。

限制

撰写变数仅支持 #{} 插补的方式。

三步骤使用 root variable

Step1：设置变数

采用存放 _variables.scss 变数资料。

举例颜色、字型、body

$variable-prefix:             bs- !default;

$colors: (
  "blue":       #0d6efd,
  "indigo":     #6610f2,
  "purple":     #6f42c1,
  "pink":       #d63384,
  "red":        #dc3545,
) !default;

### Step2：设置最外层

> `:root` 代表根目录选取器，这是 css 设置全域变数的方式，并使用 `--` 符号作为变数开头。

```scss
:root {
}

Step3：生成 root 样式

:root {
  @each $color, $value in $colors {
    --#{$variable-prefix}#{$color}: #{$value};
  } 
}

透过回圈方式读取出 $colors 每一笔的资料，$color 代表每一笔资料的 key，$value 代表每一笔资料的 value。

ex：

$color: "blue";
$value: #0d6efd;

透过差补的方式将变数组合起来。

--#{$variable-prefix}：--bs-
#{color}：blue
#{$value}：#0d6efd

编译後的 css

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
}

接下来就可以在设置样式时，使用 root 变数当作属性参数。

示范设置颜色：#0d6efd

--#{前缀字}#{颜色}：--#{$variable-prefix}blue
透过 var() 将字串转为变数。

.fs-1 {
  font-size: 2rem;
  color: var(--#{$variable-prefix}blue);
}

开发者工具查看样式

区域变数会在上方，全域变数会在下方。
透过开发者工具查看最下方样式 :root，即可看出这个网站的全域变数有哪些。

基础 root 范例 CodePen 传送门

进阶 root 变数设置

引号问题

#{} 插补会将字串内的引号移除。

解决方法

透过 inspect() 函式保留引号。

:root {
  --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
}

body {
  font-family: var(--#{$variable-prefix}font-sans-serif);
}

编译後的 css

:root {
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body {
  font-family: var(--bs-font-sans-serif);
}

null 参数

透过来判断值是否为 null 来决定是否要设置 root 变数。

$body-text-align:           null !default;

:root {  
  @if $body-text-align != null {
    --#{$variable-prefix}body-text-align: #{$body-text-align};
  }
}

body {
  text-align: $body-text-align;
}

优势