Sass

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

On this page

利用我们的源Sass文件来使用变量、映射、mixin等等。

文件结构

尽可能避免修改Bootstrap的核心文件。对于Sass，这意味着创建自己的样式表来导入引导，以便修改和扩展它。假设你’如果你使用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

// 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/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";

// 5. Add additional custom code here

在设置到位后，您可以开始修改您的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

Repeat as necessary for any variable in Bootstrap, including the global options below.

Get started with Bootstrap via npm with our starter project! Head to the twbs/bootstrap-npm-starter template repository to see how to build and customize Bootstrap in your own npm project. Includes Sass compiler, Autoprefixer, Stylelint, PurgeCSS, and Bootstrap Icons.

映射和循环

Bootstrap includes a handful of Sass maps, key value pairs that make it easier to generate families of related CSS. We use Sass maps for our colors, grid breakpoints, and more. Just like Sass variables, all Sass maps include the !default flag and can be overridden and extended.

Some of our Sass maps are merged into empty ones by default. This is done to allow easy expansion of a given Sass map, but comes at the cost of making removing items from a map slightly more difficult.

修改地图

All variables in the $theme-colors map are defined as standalone variables. To modify an existing color in our $theme-colors map, add the following to your custom Sass file:

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

Later on, theses variables are set in Bootstrap’s $theme-colors map:

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

添加到地图

Add new colors to $theme-colors, or any other map, by creating a new Sass map with your custom values and merging it with the original map. In this case, we’ll create a new $custom-colors map and merge it with $theme-colors.

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

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

从地图中删除

To remove colors from $theme-colors, or any other map, use map-remove. Be aware you must insert it between our requirements and options:

// 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";
// etc

所需密钥

Bootstrap assumes the presence of some specific keys within Sass maps as we used and extend these ourselves. As you customize the included maps, you may encounter errors where a specific Sass map’s key is being used.

For example, we use the primary, success, and danger keys from $theme-colors for links, buttons, and form states. Replacing the values of these keys should present no issues, but removing them may cause Sass compilation issues. In these instances, you’ll need to modify the Sass code that makes use of those values.

功能

颜色

Next to the Sass maps we have, theme colors can also be used as standalone variables, like $primary.

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

You can lighten or darken colors with Bootstrap’s tint-color() and shade-color() functions. These functions will mix colors with black or white, unlike Sass' native lighten() and darken() functions which will change the lightness by a fixed amount, which often doesn’t lead to the desired effect.

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

In practice, you’d call the function and pass in the color and weight parameters.

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

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

颜色对比度

In order to meet WCAG 2.0 accessibility standards for color contrast, authors must provide a contrast ratio of at least 4.5:1, with very few exceptions.

An additional function we include in Bootstrap is the color contrast function, color-contrast. It utilizes the WCAG 2.0 algorithm for calculating contrast thresholds based on relative luminance in a sRGB colorspace to automatically return a light (#fff), dark (#212529) or black (#000) contrast color based on the specified base color. This function is especially useful for mixins or loops where you’re generating multiple classes.

For example, to generate color swatches from our $theme-colors map:

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

It can also be used for one-off contrast needs:

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

You can also specify a base color with our color map functions:

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

转义SVG

We use the escape-svg function to escape the <, > and # characters for SVG background images. When using the escape-svg function, data URIs must be quoted.

加减函数

我们使用add和subtract函数包装CSS calc函数。这些函数的主要目的是避免将“无单位”0值传递到计算表达式时出错。像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);
}
返回顶部