Sass

使用我们的源Sass文件来利用变量，映射，mixin和函数，以帮助您更快地构建和自定义项目。

在本页面

使用我们的源Sass文件来利用变量、映射、mixin等等。在我们的构建中，我们将Sass舍入精度提高到6（默认为5），以防止浏览器舍入出现问题。

文件结构

尽可能避免修改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，或选择所需的部分。我们鼓励后者，尽管我们知道组件之间存在一些要求和依赖关系。您还需要为我们的插件包含一些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/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";

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

可变默认值

Bootstrap中的每个Sass变量都包含 !default标志，使您可以在自己的Sass中覆盖变量的默认值，而无需修改Bootstrap的源代码。根据需要复制和粘贴变量，修改其值，然后删除该!default 标志。如果已经分配了变量，则不会被Bootstrap中的默认值重新分配。

您可以在scss/_variables.scss中找到Bootstrap变量的完整列表。某些变量设置为 null，除非在配置中将其覆盖，否则这些变量不会输出属性。

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

下面是一个通过npm导入和编译Bootstrap时为<body> 更改background-color 和 color的示例：

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

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

映射和循环

Bootstrap包括一些Sass映射，键值对，这些键值对使生成相关CSS系列更加容易。我们将Sass映射用于我们的颜色，网格断点等。就像Sass变量一样，所有Sass映射都包含该!default标志，并且可以覆盖和扩展。

默认情况下，我们的一些Sass映射会合并为空映射。这样做是为了轻松扩展给定的Sass映射，但这样做的代价是使从映射中删除项目变得更加困难。

修改映射

在$theme-colors映射中的所有变量都定义为独立变量。要修改 $theme-colors映射中的现有颜色，请将以下内容添加到自定义Sass文件中：

$primary: #0074d9;
$danger: #ff4136;

稍后，这些变量在Bootstrap的$theme-colors映射中设置：

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

添加映射

为$theme-colors或任何其他映射添加新的颜色，方法是使用自定义值创建一个新的Sass映射，并将其与原始映射合并。在本例中，我们将创建一个新的$custom-colors映射并将其与$theme-colors合并。

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

删除映射

要从 $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映射的键时遇到错误。

例如，我们将$theme-colors中的 primary、 success和 danger 键用于链接、按钮和表单状态。替换这些键的值应该不会出现问题，但是删除它们可能会导致Sass编译问题。在这些情况下，您需要修改使用这些值的Sass代码。

函数

颜色

除了 Sass 映射之外，主题颜色还可以用作独立变量，比如 $primary。

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

使用Bootstrap的tint-color() 和 shade-color()函数可以使颜色变亮或变暗。这些函数会将颜色与黑色或白色混合，这与Sass的原生lighten() 和 darken() 函数不同，后者会以固定的数量更改亮度，这通常不会产生所需的效果。

// Tint a color: mix a color with white
@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}

// Shade a color: mix a color with black
@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}

// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}

实际上，您需要调用函数并传入color和weight参数。

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

颜色对比

在至少对比度为1.5的情况下，只有极少数作者的对比度达到WCAG 2.0 标准。

我们在Bootstrap中包含的另一个颜色对比函数是color-contrast函数。它利用 WCAG 2.0 算法根据sRGB颜色空间中的相对亮度计算对比度阈值，根据指定的基色自动返回浅色(#fff)、深色(#212529)或黑色(#000)对比度颜色。此函数对于生成多个类的混合或循环特别有用。

例如，要从我们的 $theme-colors 映射生成颜色样本：

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-contrast($value);
  }
}

它也可以用于一次性对比需求：

.custom-element {
  color: color-contrast(#000); // returns `color: #fff`
}

您还可以使用我们的颜色映射函数指定基本颜色：

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

Escape SVG

我们使用 escape-svg 函数来转义背景图像的<, > 和 # 字符。使用 escape-svg函数时，必须引用数据 URIs 。

加减函数

我们使用 add 和 subtract函数包装CSScalc 函数。这些函数的主要目的是避免将“无单位”0值传递到calc表达式时出现错误。像 calc(10px - 0)这样的表达式在所有浏览器中都会返回一个错误，尽管在数学上是正确的。

Example where the calc is valid:

$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);
}