Bootstrap5 Sass语法

2021-09-01 17:33 更新

使用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
  }
}


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号