主题化 · Bootstrap

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

Sass定义

利用系统提供的Sass源文件、maps文件、变量、混合等。

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

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

如果您已经下载了我们的源文件而没有使用包管理器，那么您需要手动设置类似于该结构的东西，将Bootstrap的源文件与您自己的文件分开.

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

在


   custom.scss

中，您将导入Bootstrap的源Sass文件。您有两个选择：包括所有Bootstrap，或选择您需要的部件。我们鼓励后者，但要注意我们的组件有一些要求和依赖。您还需要为我们的插件添加一些JavaScript。

// Custom.scss
// Option A: Include all of Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";// 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";

使用该设置，您可以开始修改任何Sass变量和映射 custom.scss 。您还可以根据 //Optional 需要开始在该部分下添加Bootstrap的部分。我们建议使用 bootstrap.scss 文件中的完整导入堆栈作为起点。

变量缺省值

Bootstrap 4中的每个Sass变量都包含 !default 标签，这是允许您在自己的Sass中覆盖变量的默认值，而无需修改Bootstrap的源代码。根据需要复制和粘贴变量，修改其值，并删除 !default 标志。如果已经分配了一个变量，那么它将不会被Bootstrap中的默认值重新分配。

相同Sass文件中的变量覆盖可以在默认变量之前或之后。但是，当覆盖Sass文件时，您的覆盖必须在导入Bootstrap的Sass文件之前。

下面的例子,改变 <body> 中的 background-color 与 color 属性，并通过Nodejs NPM方法引导编译：

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

对Bootstrap中的任何变量进行必要的重复定义，包括下面的全局选项和子类选项。

Map定义与loops循环定义

Sass的第三个版本给我们带来了新的数据类型，叫做 map 。虽然你可以不知道这个名称，但在其他的语言中我们使用过map，通常就是关联数组。换句话说，Sass的 map 就是用关键名匹配对应值的一个数组(这里译者为大家提供了一个技术普及帖：《使用Sass Maps 的技术普及知识》http://www.z01.com/help/web/3208.shtml )

Bootstrap 4包括一些Sass map定义，使得更容易产生相关CSS的家庭。我们使用Sass map作为我们的颜色、网格、断点等关键了定义，这就如同Sass变量一样，所有Sass映射都包含 !default 标志，可以被覆盖并扩展。

下面是改变了一个例子 background-color ，并 color 为 body 进口，并通过NPM编译引导时：

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

修改 map

例如，要修改我们 $theme-colors map的现有颜色，请将以下内容添加到您的自定义Sass文件中：

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
  添加map
  添加一个新的颜色$theme-colors、新的键和值：
    $theme-colors: (
  "custom-color": #900
  移除map

  要从$theme-colors任何其他画布删除颜色，请使用map-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";
  必须的键值
  Bootstrap假定在我们使用的Sass地图中存在一些特定的键，并自行扩展它们。在您定制包含的地图时，您可能会遇到使用特定Sass地图密钥的错误。
  例如，我们使用primary，success以及danger来自键 $theme-colors 的链接，按钮和表单的状态。替换这些键的值应该没有问题，但删除它们可能会导致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 map中选择一种颜色，如同在v3中的颜色变量：
    .custom-element {
  color: gray("100");
  background-color: theme-color("dark");
  我们还可获得特定的函数level的颜色来自$theme-colors map定义，负电平值会减轻颜色，而较高的电平值会变暗，从而实现变量定义颜色。
    @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 (如primary默认色 或 danger危险色) 的颜色名称和数字级别。
    
.custom-element {
  color: theme-color-level(primary, -10);
  未来还可以添加其他功能或您自己的自定义Sass，以创建附加Sass map的级别函数，或者如果要更详细地创建级别函数。
  Bootstrap中包含的另外一个功能是色彩对比功能color-yiq,它基于YIQ color space指定的基色自动返回光（#fff）或暗（#111）产生颜色对比。此功能对于要生成多个类的mixins或循环特别有用。
  例如，从我们的$theme-colors map生成颜色样本：
    @each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  它也可以用于一次性对比度需求：
    .custom-element {
  color: color-yiq(#000); // returns `color: #fff`
  您还可以使用我们的color map功能指定基色：:
    .custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
   SVG转义规范
  我们使用escape-svg方法对<、>、#对svg进行转义，在定义背景字体的时候，因而在IE中需要转义才能正确显示,。
  我们使用add、subtract来封装CSS，使用这些函数的目的是避免把0值传递给算式，比如calc(10px - 0) 尽管在数学中是正确的，但在所有浏览器中都会返回错误。
  下面是有一个合法有效的CSS公式计算示例：
$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);
下面则是一个无效的非法CSS公式计算示例（因为$border-width:0输出了一个0值-译者注）:
$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);
  Sass选项
  使用内置的自定义变量文件定制Bootstrap 4，并轻松地使用新的 $enable-* Sass变量切换全局CSS首选项。覆盖变量的值并根据需要npm run test重新编译。
  您可以在_variables.scss 文件中找到并自定义这些变量，用于关键全局选项。
        Variable（变量）
        Values（值）
        Description（描述）
        $enable-grid-classes
        true (default) or false
        使CSS类网格系统的产生 (如 .container, .row, .col-md-1, etc.).
        $enable-caret
        true (default) or false
        Enables pseudo element caret on .dropdown-toggle.
        $enable-print-styles
        true (default) or false
        启用优化打印的样式。
  Bootstrap的许多组件和实用程序都是通过Sass maps定义一系列颜色构建的。该maps可以在Sass中循环，以快速生成一系列规则。
  Bootstrap 4中提供的所有颜色可用作我们scss/_variables.scss文件中的Sass变量和Sass映射,还将在随后的次要版本中扩展，以增加额外的阴影，如同本文档中的灰度调色板一样可选。
      Blue 蓝
      Indigo 靛青
      Purple 紫色
      Pink 粉红
      Red 正红
      Orange 橙红
      Yellow 黄
      Green 绿
      Teal 鸭绿
      Cyan 青
  以下是您可以在Sass中使用这些的方法：:
    // With variable .alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }
  彩色实用程序类也可用于设置color和background-color。
    将来，我们的目标是为每种颜色的色调提供Sass地图和变量，就像下面的灰度色彩一样.
  我们使用所有颜色的子集来创建一个较小的调色板，用于生成配色方案，也可以作为Sass变量和scss/_variables.scss文件中的Sass映射。
      Primary
      Secondary
      Success
      Danger
      Warning
      Light
  系统提供一个广泛的灰色变量和一个Sass map 在scss/_variables.scss用于在整个项目中实现一致的灰色阴影。
  在 _variables.scss,里，你会发现我们的颜色变量和Sass mpas。以下是$colors的Sass map定义变量：
    $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;
  开发者可以自由添加、删除或修改这个maps中的值，以更新其在许多其他组件中的使用方式（遗憾的是，目前并不支持每个组件都能过Sass map来定义，未来版本的更新将力求改进这一点，目前只能使用${color}变量和这个Sass map。
  Bootstrap大多组件和实用程序都使用@each遍历Sass map映射的循环构建。通过我们$theme-colors生成组件的变体和为每个断点创建响应变体特别有用。当自定义这些Sass map并重新编译时，您将自动看到您在这些循环中反映的更改。
  Bootstrap的许多组件都使用基类修饰符类方法构建，这意味着大部分样式都包含在基础类（如.btn）中，而样式变量则限于修饰符类（如.btn-danger）,这些修饰符类是从$theme-colorsmap构建的，以便自定义修饰符类的数量和名称。
  以下是我们如何循环遍历$theme-colors map以生成.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循环不限于彩色图，可以用它生成组件或实用程序的响应变体。例如我们的响应文本对齐实用程序，我们将Sass映射的@each循环$grid-breakpoints与媒体查询包含在一起:
    @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，您的更改将适用于遍历该地图的所有循环。
  CSS变量
  Bootstrap 4 在其编译的CSS中包含大约二十个CSS自定义属性（变量）。在浏览器的Inspector，代码沙箱或一般原型设计中工作时，可以轻松访问常用的值，例如我们的主题颜色，断点和主要字体堆栈。
  这里是我们包含的变量（注意:root 是必需的）。他们位于我们的_root.scss文件。
  :root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
CSS变量为Sass的变量提供了类似的灵活性，但是在被提供给浏览器之前不需要编译。例如，在这里我们用CSS变量重置页面的字体和链接样式。
body {
  font: 1rem/1.5 var(--font-family-sans-serif);
  color: var(--blue);
虽然我们原本包含在我们的CSS变量断点（如--breakpoint-md），这些都没有在媒体查询的支持，但他们仍然可以使用内的媒体查询规则集。这些断点变量保留在已编译的CSS中，以便向后兼容，因为它们可以被JavaScript使用。在规范中了解更多信息。
以下是不支持的示例：
@media (min-width: var(--breakpoint-sm)) {
这里是一个支持的例子：
@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);