自定义引导4与我们的新内置Sass变量，为全球风格的首选项，以便于主题和组件的变化。

导言

在Bootstrap 3中，主题化很大程度上是由更少的、自定义的css中的变量重写驱动的，以及我们在我们的dist档案。通过一些努力，我们可以完全重新设计Bootstrap 3的外观，而无需触及核心文件。引导4提供了一种熟悉但略有不同的方法。

现在，主题化由Sass变量、Sass映射和自定义CSS完成。不再有专门的主题样式表；相反，您可以启用内置主题来添加渐变、阴影等。

沙斯

利用我们的源代码Sass文件来利用变量、映射、混合体等等。

文件结构

尽可能避免修改Bootstrap的核心文件。对于Sass来说，这意味着创建您自己的样式表来导入引导程序，以便您可以修改和扩展它。假设您已经下载了源文件或正在使用包管理器，那么您的文件结构如下所示：

your-project/├── scss │ └── custom.scss └── node_modules/ └── bootstrap ├── js └── scss

在你的custom.scss，您将导入Bootstrap的源Sass文件。你有两个选择：包括所有的引导，或选择你需要的部分。我们鼓励后者，但要注意，组件之间存在一些需求和依赖关系。您还需要为我们的插件添加一些JavaScript。

// Custom.scss// Option A: Include all of Bootstrap@import "node_modules/bootstrap/scss/bootstrap";

// Custom.scss// Option B: Include parts of Bootstrap// 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";

设置就绪后，您可以开始修改custom.scss.还可以开始在// Optional根据需要分部门。

变量默认值

引导程序4中的每个Sass变量包括!default标志允许您在自己的Sass中重写变量的默认值，而无需修改Bootstrap的源代码。根据需要复制和粘贴变量，修改它们的值，并删除!default旗子。如果一个变量已经被赋值，那么它将不会被重新赋值的默认值在引导。

变量可以在默认变量之前或之后重写同一Sass文件。但是，在重写Sass文件时，您的重写必须在导入引导程序的Sass文件之前进行。

下面是一个更改background-color和color为在通过国家预防机制导入和编译Bootstrap时：

// Your variable overrides$body-bg: #000;$body-color: #111;// Bootstrap and its default variables@import "node_modules/bootstrap/scss/bootstrap";

根据需要，对Bootstrap中的任何变量重复，包括下面的全局选项。

映射和循环

引导4包含了少量的Sass映射，键值对使得生成相关CSS的家族变得更容易。我们使用Sass地图作为我们的颜色，网格断点，等等。就像Sass变量一样，所有Sass映射都包括!default标志，可以重写和扩展。

例如，要修改$theme-colors映射，将以下内容添加到您的自定义Sass文件中：

$theme-colors: ( "primary": #0074d9, "danger": #ff4136);

若要将新颜色添加到$theme-colors，添加新的键和值：

$theme-colors: ( "custom-color": #900);

功能

引导程序使用了几个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%28E.。g.，主要或危险%29和数字级别。

.custom-element { color: theme-color-level(primary, -10);}

将来还可以添加其他函数，或者添加您自己的自定义Sass，以便为其他Sass映射创建级别函数，如果您想要更详细，甚至可以添加一个通用函数。

色彩对比

我们在Bootstrap中包含的一个附加功能是颜色对比功能，color-yiq.它利用YIQ颜色空间自动返回光%28#fff%29或黑暗%28#111%29基于指定基色的对比度颜色。此函数对于生成多个类的混和或循环特别有用。

例如，要从我们的$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`}

SASS选项

使用内置的自定义变量文件自定义引导程序4，并轻松切换新的全局css首选项。$enable-*一些变量。重写变量的值并用npm run test视需要而定。

您可以在_variables.scss档案。

颜色

Bootstrap的许多组件和实用程序都是通过Sass映射中定义的一系列颜色构建的。这个映射可以在Sass中循环以快速生成一系列规则集。

所有颜色

Bootstrap 4中提供的所有颜色都可以作为Sass变量和我们的Sass映射提供。scss/_variables.scss档案。这将在随后的小版本中扩展，以添加更多的阴影，类似于灰度调色板我们已经包括了。

蓝色

靛蓝

紫

粉红

红

橙色

黄

绿

提尔

青色

下面是如何在Sass中使用这些内容：

// With variable.alpha { color: $purple; }// From the Sass map with our `color()` function.beta { color: color("purple"); }

颜色工具类也可用于设置color和background-color。

在未来，我们的目标是为每种颜色的阴影提供Sass地图和变量，就像我们对下面的灰度颜色所做的那样。

主题色彩

我们使用所有颜色的子集来创建一个较小的调色板，用于生成配色方案，也可以作为Sass变量和我们的Sass映射使用。scss/_variables.scss档案。

初等

二次

成功

危险

警告

信息

轻光

黑暗

格雷斯

的灰色变量集和Sass映射scss/_variables.scss在整个项目中保持一致的灰色阴影。

100

200

300

400

500

600

700

800

900

内_variables.scss，你会找到我们的颜色变量和Sass地图。下面是一个例子$colorsSass地图：

$colors: ( "blue": $blue, "indigo": $indigo, "purple": $purple, "pink": $pink, "red": $red, "orange": $orange, "yellow": $yellow, "green": $green, "teal": $teal, "cyan": $cyan, "white": $white, "gray": $gray-600, "gray-dark": $gray-800) !default;

在映射中添加、删除或修改值，以更新它们在许多其他组件中的使用方式。不幸的是，在这个时候，每一个组件使用此Sass映射。今后的更新将努力改进这一点。在此之前，计划利用${color}变量和这个Sass地图。

组件

Bootstrap的许多组件和实用程序都是用@each在Sass映射上迭代的循环。这对于我们生成组件的变体尤其有帮助。$theme-colors并为每个断点创建响应变量。当您自定义这些Sass映射并重新编译时，您将自动看到这些循环中反映的更改。

修饰符

许多Bootstrap组件都是使用基础修饰符类的方法构建的。这意味着大部分样式都包含在基类中（例如.btn），而样式变体仅限于修饰符类（例如，.btn-danger）。这些修饰符类是从$theme-colors地图构建的，以定制我们修饰符类的数量和名称。

下面是我们如何遍历$theme-colors生成修饰符的映射。.alert组件和我们所有的.bg-*背景实用程序。

// Generate alert modifier classes@each $color, $value in $theme-colors { .alert-#{$color} { @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6)); }}// Generate `.bg-*` color utilities@each $color, $value in $theme-colors { @include bg-variant('.bg-#{$color}', $value);}

响应性

这些Sass循环也不限于彩色地图。您还可以生成组件或实用程序的响应变体。例如，我们的响应性文本对齐实用程序将@each循环的$grid-breakpoints包含媒体查询的Sass地图。

@each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); .text#{$infix}-left { text-align: left !important; } .text#{$infix}-right { text-align: right !important; } .text#{$infix}-center { text-align: center !important; } }}

如果您需要修改$grid-breakpoints，您的更改将应用于遍历该映射的所有循环。