阅读(212) 赞(16)

Bootstrap5 Sass语法

2021-08-30 18:24:07 更新

使用Sass文件来利用变量、映射、mixin和函数来帮助你更快地构建和自定义你的项目。

使用源Sass文件来利用变量、映射、mixin等等。在Bootstrap的构建中，将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 标志，你可以在不修改Bootstrap源码的情况下重写自己的Sass。根据需要复制和粘贴变量，修改它们的值，并删除 !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中的任何变量（包括下面的全局选项）进行必要的重复。

利用 npm 和我们提供的模板项目快速上手 Bootstrap！ 请前往 twbs/bootstrap-npm-starter 模板仓库，以了解如何如何在你自己的 npm 项目中构建和定制 Bootstrap。包括 Sass 编译器、Autoprefixer、Stylelint、PurgeCSS 以及 Bootstrap 图标库。

Map和循环

Bootstrap包含一些Sass映射，这可以让我们生成CSS会更加容易。我们将Sass映射用于颜色，网格断点等。就像Sass变量一样，所有Sass映射都包含 !default标志，并且可以覆盖和扩展。

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

修改 map

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

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

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

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

添加 map

通过我们自己创建的新Sass map并将其与原map合并，将新颜色添加到 $theme-colors 或任何其他map中。在这种情况下，我们将创建一个新的 $custom-colors map并将其与 $theme-colors合并。

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

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

从 map 中删除

要从 $theme-colors 或任何其他map中删除颜色，请使用 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映射中存在。自定义包含的map时，在使用特定Sass map的值时可能会遇到错误。

例如，我们将 $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%);
}

色彩对比

为了满足 WCAG 2.0彩色对比度的可访问性标准，除了极少数例外，作者必须提供至少 4.5：1的对比度。

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

例如，要从我们的 $theme-colors map生成颜色样本:

@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`
}

转义 SVG

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

函数计算

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

calc有效的例子:

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

无效的calc:

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

混合

我们的scss/mixins/目录中有大量的 mixin 可以为 Bootstrap 的部分提供支持，也可以在您自己的项目中使用。

配色方案

一种媒体查询的速记混合方案prefers-color-scheme可用于支持light，dark以及自定义配色方案。

@mixin color-scheme($name) {
  @media (prefers-color-scheme: #{$name}) {
    @content;
  }
}

.custom-element {
  @include color-scheme(dark) {
    // Insert dark mode styles here
  }

  @include color-scheme(custom-named-scheme) {
    // Insert custom color scheme styles here
  }
}

← Bootstrap5 概览

Bootstrap5 参数 →