SASS
利用我们的源 Sass 文件来利用变量、映射、混入和函数来帮助您更快地构建和自定义您的项目。
利用我们的源 Sass 文件来利用变量、映射、混合等。
文件结构
尽可能避免修改 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
// 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 (including any separate color mode stylesheets)
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
// 4. Include any default map overrides here
// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// 6. Optionally include any other parts as needed
@import "../node_modules/bootstrap/scss/utilities";
@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";
@import "../node_modules/bootstrap/scss/helpers";
// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";
// 8. Add additional custom code here
有了这个设置,你就可以开始修改你的custom.scss
. 您也可以根据需要在该部分下开始添加 Bootstrap 的// Optional
部分内容。我们建议使用我们bootstrap.scss
文件中的完整导入堆栈作为起点。
变量默认值
Bootstrap 中的每个 Sass 变量都包含!default
标志,允许您在自己的 Sass 中覆盖变量的默认值,而无需修改 Bootstrap 的源代码。根据需要复制和粘贴变量,修改它们的值,然后删除!default
标志。如果一个变量已经被赋值,那么它不会被 Bootstrap 中的默认值重新赋值。
您将在 中找到 Bootstrap 变量的完整列表scss/_variables.scss
。一些变量设置为null
,这些变量不会输出属性,除非它们在您的配置中被覆盖。
变量覆盖必须在我们的函数被导入之后,但在其他导入之前。
这是一个在通过 npm 导入和编译 Bootstrap 时更改background-color
和color
的示例:<body>
// 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/variables-dark";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
根据需要对 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
。请注意,您必须$theme-colors
在我们的要求之间插入它的定义之后variables
和使用之前maps
:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
所需键
Bootstrap 假设在 Sass 映射中存在一些特定的键,因为我们自己使用和扩展了这些键。当您自定义包含的映射时,您可能会在使用特定 Sass 映射的键时遇到错误。
例如,我们将primary
、success
和danger
键$theme-colors
用于链接、按钮和表单状态。替换这些键的值应该不会出现问题,但删除它们可能会导致 Sass 编译问题。在这些情况下,您需要修改使用这些值的 Sass 代码。
职能
颜色
除了我们拥有的Sass 映射之外,主题颜色也可以用作独立变量,例如$primary
.
.custom-element {
color: $gray-100;
background-color: $dark;
}
tint-color()
您可以使用 Bootstrap和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));
}
实际上,您会调用该函数并传入颜色和权重参数。
.custom-element {
color: tint-color($primary, 10%);
}
.custom-element-2 {
color: shade-color($danger, 30%);
}
色彩对比
为了满足Web 内容可访问性指南 (WCAG)的对比度要求,作者必须提供最低4.5:1的文本颜色对比度和最低3:1 的非文本颜色对比度,极少数情况除外。
为了解决这个问题,我们color-contrast
在 Bootstrap 中包含了该函数。它使用WCAG 对比度算法根据颜色空间中的相对亮度计算对比度阈值,以根据指定的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`
}
转义 SVG
我们使用该escape-svg
函数来转义 SVG 背景图像的<
,>
和#
字符。使用该escape-svg
函数时,必须引用数据 URI。
加减函数
我们使用add
和subtract
函数来包装 CSScalc
函数。这些函数的主要目的是避免将“无单位”0
值传递给calc
表达式时出现错误。尽管在数学上是正确的,但像这样的表达式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);
}
混入
我们的scss/mixins/
目录有大量混合插件,它们为 Bootstrap 的部分提供动力,也可以在您自己的项目中使用。
配色方案
媒体查询的速记混合prefers-color-scheme
可用于支持light
、dark
和自定义配色方案。有关我们的颜色模式 mixin 的信息,请参阅颜色模式文档。
@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
}
}