利用Bootstrap的源Sass文件，用户可以使用变量、映射、mixin和函数来更快地构建和定制项目。通过定义变量和映射，用户可以轻松地调整颜色、字体和间距等样式属性。同时，使用mixin和函数可以快速创建复杂的样式效果，提高开发效率。
一、介绍
在Bootstrap 3中，主题定制主要依赖于覆盖LESS中的变量、自定义CSS以及单独的主题样式表。通过一些努力，开发者可以在不触及核心文件的情况下完全重新设计Bootstrap 3的外观。然而，Bootstrap 4提供了一种略有不同但更为灵活的定制方式。
在Bootstrap 4中，主题设置由Sass变量、Sass贴图和自定义CSS来完成。不再需要专门的主题样式表；相反，用户可以通过启用内置主题来添加渐变、阴影等效果。这种方法使得定制主题变得更加灵活，同时也更容易维护和更新。
二、文件结构
尽可能避免修改 Bootstrap 的核心文件。对于 Sass 来说，这意味着创建自己的样式表来导入 Bootstrap，以便可以修改和扩展它。假设使用的是像 npm 这样的包管理器，将有一个如下所示的文件结构：
your-project/ ├── scss │ └── custom.scss └── node_modules/ └── bootstrap ├── js └── scss
如果已经下载了我们的源文件并且没有使用包管理器，则需要手动设置类似于该结构的内容，将 Bootstrap 的源文件与你自己的源文件分开。
your-project/ ├── scss │ └── custom.scss └── bootstrap/ ├── js └── scss
三、导入
在custom.scss中将导入Bootstrap源Sass文件。在这里有两个选择：一是包括所有的Bootstrap样式，二是选择性地引入您需要的部分。建议选择后者，因为Bootstrap的组件之间存在一些需求和依赖性。此外，如果需要使用Bootstrap的JavaScript插件，也需要确保相应的JavaScript文件被包含进来。
// Custom.scss // Option A: Include all of Bootstrap // Include any default variable overrides here (though functions won't be available) @import "../node_modules/bootstrap/scss/bootstrap"; // Then add additional custom code here
// Custom.scss // Option B: Include parts of Bootstrap // 1. Include functions first (so you can manipulate colors, SVGs, calc, etc) @import "../node_modules/bootstrap/scss/functions"; // 2. Include any default variable overrides here // 3. Include remainder of required Bootstrap stylesheets @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/mixins"; // 4. Include any optional Bootstrap components as you like @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";
在设置到位后，可以开始修改您的Sass变量和映射custom.scss.，还可以根据需要在//Optional节下开始添加引导的部分。建议使用我们的完整导入bootstrap.scss文件作为起点。
四、变量默认值
Bootstrap的每个Sass变数都包含!default标志，可以在自己的Sass中覆盖变数的预设值，而无需更动Bootstrap的原始代码。复制需要的变量并粘贴，修改其数值，并删除!default标志。若已经分配好了变数，则他将不会被Bootstrap的预设值再度分配。
可以在scss/_variables.scss中找到Bootstrap变量的完整列表。有些变量设置为null，除非在配置中被覆盖，否则这些变量不会输出其属性。同一Sass文件中的变数可以在预设变数之前或之后覆盖。但是，当覆盖横跨Sass文件时，必须在导入Bootstrap的Sass文件之前进行覆盖。
以下是一个透过npm导入和编译Bootstrap时，更改<body>中的background-colorcolorr：
// Required @import "../node_modules/bootstrap/scss/functions"; // Default variable overrides $body-bg: #000; $body-color: #111; // Required @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/mixins"; // Bootstrap and its default variables // Optional Bootstrap components here @import "../node_modules/bootstrap/scss/root"; @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/type"; // etc
根据需要对 Bootstrap 中的任何变量重复上述步骤，包括下面的全局选项。
五、映射和循环
Bootstrap 4包括一些Sass映射，它们以键值对的形式更轻松地生成相关的CSS样式。我们可以使用Sass贴图来定义颜色、网格断点等。与Sass变量类似，所有的Sass映射都包含!default标志，这意味着它们可以被覆盖和扩展。
默认情况下，一些Sass映射会合并为空的映射。这样做是为了方便扩展给定的Sass映射，但这也意味着从映射中删除项目会变得更加困难。
1、修改地图
要修改地图中的现有颜色，请将以下内容添加到自定义Sass文件中：
$theme-colors: ( "primary": #0074d9, "danger": #ff4136 );
2、添加到地图
如果需要添加新的颜色，只需在现有地图中添加新的键值对即可：
$theme-colors: ( "primary": #0074d9, "danger": #ff4136, "custom-color": #900 );
3、从地图中删除
要从或任何其他地图中删除颜色，请使用 $theme-colorsmap-remove。必须将其插入要求和选项之间：
// Required @import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/mixins"; $theme-colors: map-remove($theme-colors, "info", "light", "dark"); // Optional @import "../node_modules/bootstrap/scss/root"; @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/type"; ...
六、所需密钥
当我们使用Sass映射时，Bootstrap假设我们会自行扩展这些键，并在自定义的映射中包含它们。然而，在使用特定Sass映射中的键时，可能会遇到一些问题，尤其是在尝试删除这些键时。
举例来说，Bootstrap使用”primary”、”success”和”danger”等键来代表链接、按钮和表单状态。替换这些键的值通常不会出现问题，但如果尝试删除这些键可能会导致Sass编译错误。在这种情况下需要修改使用这些值的Sass代码，以适应所做的更改。这意味着需要确保在样式表中更新任何依赖于这些键的地方，以反映对Sass映射所做的修改。
七、功能
Bootstrap 利用了多个 Sass 函数，但只有一部分适用于常规主题。包含三个用于从颜色图中获取值的函数：
@function color($key: "blue") {
@return map-get($colors, $key);
}
@function theme-color($key: "primary") {
@return map-get($theme-colors, $key);
}
@function gray($key: "100") {
@return map-get($grays, $key);
}
这些允许从 Sass 贴图中选择一种颜色，就像使用 v3 中的颜色变量一样。
.custom-element {
color: gray("100");
background-color: theme-color("dark");
}
还有另一个函数$theme-colors，用于从地图中获取特定级别的颜色。负电平值会使颜色变亮，而高电平值会变暗。
@function theme-color-level($color-name: "primary", $level: 0) {
$color: theme-color($color-name);
$color-base: if($level > 0, #000, #fff);
$level: abs($level);
@return mix($color-base, $color, $level * $theme-color-interval);
}
将调用该函数并传入两个参数：颜色的名称$theme-colors（例如，主要或危险）和数字级别。
.custom-element {
color: theme-color-level(primary, -10);
}
将来可以添加其他函数，或者可以自己自定义 Sass 来为其他 Sass 贴图创建关卡函数，如果想更详细，甚至可以创建通用函数。
1、色彩对比
在 Bootstrap 中包含的另一个函数是颜色对比度函数color-yiq#fff#111。它利用 YIQ 色彩空间根据指定的基色自动返回浅色 （） 或深色 （） 对比色。此函数对于生成多个类的 mixin 或循环特别有用。
例如，要从地图生成色板：$theme-colors
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-yiq($value);
}
}
还可以用于一次性对比需求：
.custom-element {
color: color-yiq(#000); // returns `color: #fff`
}
还可以使用颜色映射表函数指定基色：
.custom-element {
color: color-yiq(theme-color("dark")); // returns `color: #fff`
}
2、转义 SVG
在这种情况下，我们使用该函数对SVG背景图像中的#、<和>字符进行转义。必须对这些字符进行转义才能在IE中正确显示背景图像。另外，当使用该函数时，需要用引号括起数据URI。
3、加减法函数
使用add和subtract函数来包装CSS函数。这些函数的主要目的是避免在将”无单位”值传递到表达式中时出现错误。像这样的表达式将在所有浏览器中返回错误，尽管在数学上是正确的：calc(10px – 0)。
计算值有效的示例：
$border-radius: .25rem;
$border-width: 1px;
.element {
// Output calc(.25rem - 1px) is valid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output the same calc(.25rem - 1px) as above
border-radius: subtract($border-radius, $border-width);
}
计算无效的示例：
$border-radius: .25rem;
$border-width: 0;
.element {
// Output calc(.25rem - 0) is invalid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output .25rem
border-radius: subtract($border-radius, $border-width);
}
