如何使用 Sass 生成 Bootstrap 样式

【问题标题】：How are Bootstrap styles generated using Sass如何使用 Sass 生成 Bootstrap 样式
【发布时间】：2020-06-23 08:06:08
【问题描述】：

我下载了npm bootstrap包，进入node_modules/bootstrap/dist/css/bootstrap.css，查看.alert-danger样式：

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

当我搜索这些颜色代码时，它们不会出现在任何其他文件中。这些代码在哪里定义/计算？我对使用 Sass 自定义这些值很感兴趣，我试图将特异性覆盖作为我最后的手段。

【问题讨论】：

.alert-danger 在第 47 行的 scss/_alert.scss 中定义，引导程序使用循环在一个地方生成所有颜色类型 'danger、warning、primary ...' .

【解决方案1】：

您可以在node_modules/bootstrap/scss/_variables.scss文件中找到主要颜色，但是dist bootstrap.css文件中的颜色与_variables.scss中的颜色不同，

bootstrap 从 _variables.scss 中的主要颜色生成 dist 颜色：


lighten($table-dark-bg, 7.5%)

darken($link-color, 15%)

rgba($red, .1)

【讨论】：