如何将引导程序颜色引用为 css 中的变量？

Question

我正在尝试稍微自定义我的引导程序主题。我想在我自己的 css 文件中做这样的事情：

div {
background-color: @brand-warning;//or @body-bg or @dark-gray, etc
}

也就是说，Bootstrap 有一个warning颜色变量，但我想访问它。无论如何要做到这一点？

谢谢

Answer 1

Bootstrap 4 为主题颜色定义了 CSS 变量，可用于支持浏览器而无需从 SCSS 编译：https ://getbootstrap.com/docs/4.3/getting-started/theming/#css-variables

.my-warning {
    background-color: var(--warning);
}

还有用于文本和背景颜色的实用程序类：https : //getbootstrap.com/docs/4.3/utilities/colors/

<div class="bg-warning">Warning</div>

代码笔示例

Answer 2

仅使用 CSS 是不可能做到的。您必须使用 CSS 压缩器，例如 SASS 或LESS。每个应用程序都有一个专有的 Bootstrap 模块，可以使用 Bower 或 NPM 启动。

之后，您可以调用 Bootstrap 变量（检查 your_modules_path_here/bootstrap/_variables.scss 中可用的所有变量），例如在 SASS 中：

.your-custom-element {
    background: $alert-info-bg;
}

额外的：

如果您使用SASS，我建议您导入一些Bootstrap模块，而不是所有Bootstrap堆栈。我经常使用同样的方法并且效果很好。

在您的main.scss文件中，您必须导入要使用的所有依赖项和模块：

// some bootstrap modules
@import 'bootstrap/normalize';
@import 'bootstrap/variables';
@import 'bootstrap/mixins';
@import 'bootstrap/grid';
@import 'bootstrap/scaffolding';
@import 'bootstrap/responsive-utilities';
@import 'bootstrap/utilities';
@import 'bootstrap/modals';

@import 'bootstrap/forms';
@import 'bootstrap/input-groups';
@import 'bootstrap/tables';

之后，您应该创建自己的_variables.scss文件来覆盖所需的引导 SASS 变量并添加 @import 'variables'到同一main.scss文件中

Bootstrap sass 模块非常“变量化”，所有变量都有一个 !default 指令，随时可以被覆盖。

例如，在您的自定义中_variables.scss：

$default-font: "Lato", Verdana, Arial, sans-serif;

$link-color: #ef899e;
$body-bg: #f0f0f0;
$text-color: #666;

它将覆盖这些变量，并且在下一个 SASS 构建中，输出文件将使用您的自定义来编译 Bootstrap SASS 模块。

要检查 Bootstrap 模块中可用的所有变量，您可以在/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss或中查看它bootstrap/_variables.scss（如果您不使用 npm，则在模块管理器路径内）

https://www.npmjs.com/package/bootstrap-sass

希望能帮助到你！