Sass · Bootstrap文档网

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

淡定的保温杯 · scss引入其他scss变量，并通过js动态 ...· 3 天前 ·

非常酷的柳树 · scss变量动态修改_如何动态改变scss中 ...· 3 天前 ·

朝气蓬勃的木瓜 · Sass/SCSS 变量 | Quasar ...· 3 天前 ·

深沉的黄瓜 · 全局scss变量 | Vue Naive ...· 3 天前 ·

爽快的手链 · Sass · Bootstrap文档网· 3 天前 ·

含蓄的手套 · 什么是特征工程？ - 特征工程解释 - AWS· 1 月前 ·

怕老婆的钱包 · I can not find a ...· 2 月前 ·

爱笑的小蝌蚪 · Eclipse ...· 3 月前 ·

留胡子的楼梯 · 略论十三世达赖喇嘛与清政府的关系· 3 月前 ·

拉风的凳子 · 通过Druid连接池获取Connection ...· 5 月前 ·

利用我们的源 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 中的任何变量重复，包括下面的全局选项。
通过我们的入门项目通过 npm 开始使用 Bootstrap！前往twbs/bootstrap-npm-starter模板存储库，了解如何在您自己的 npm 项目中构建和自定义 Bootstrap。包括 Sass 编译器、Autoprefixer、Stylelint、PurgeCSS 和 Bootstrap Icons。
映射和循环

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 代码。

.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 的部分提供动力，也可以在您自己的项目中使用。

@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
          Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
          Code licensed MIT, docs CC BY 3.0.
          Currently v5.3.0-alpha1.
        Links
          Examples
          Icons
          Themes
          Swag Store
        Guides
          Getting started
          Starter template
          Webpack
          Parcel
        Projects
          Bootstrap 5
          Bootstrap 4
          Icons
          npm starter
        Community
          Issues
          Discussions
          Corporate sponsors
          Open Collective
          Stack Overflow
媒体查询的速记混合prefers-color-scheme可用于支持light、dark和自定义配色方案。有关我们的颜色模式 mixin 的信息，请参阅颜色模式文档。
除了我们拥有的Sass 映射之外，主题颜色也可以用作独立变量，例如$primary.