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

Posted 2023-03-06

【中文标题】如何将引导颜色作为css中的变量引用？

【英文标题】：How to reference bootstrap colors as a variable in css?

【发布时间】：2017-07-23 06:01:57

【问题描述】：

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

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

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

谢谢

【问题讨论】：

我从未使用过 Bootstrap，但我认为您可以尝试导入具有变量声明的 Bootstrap 的 .less 文件，然后按原样使用您的代码。

【参考方案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>

CodePen example

【讨论】：

谢谢。超级棒！

【参考方案2】：

版本 bootstrap@4.0.0-beta.2 带有许多 SASS 映射，如

$grays: () !default;

$grays: map-merge((
    "100": $gray-100,
    "200": $gray-200,
    "300": $gray-300,
    "400": $gray-400,
    "500": $gray-500,
    "600": $gray-600,
    "700": $gray-700,
    "800": $gray-800,
    "900": $gray-900
), $grays);

不知道如何使用 SASS 地图的朋友请使用

body 
    padding-top: 5rem;
    background: map-get($grays, "200")

您将可以使用各种标准颜色。

啊！请不要忘记导入 _variables 文件，如

@import "~bootstrap/scss/_variables.scss";

:)

【参考方案3】：

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

希望对你有帮助！

【讨论】：

谢谢，这很有帮助！我怀疑如果没有 LESS 或 SASS，这样做相当简单，而且我猜是常见的任务。

【参考方案4】：

尝试从 GIT 克隆 Bootstrap：https://github.com/twbs/bootstrap/，然后使用变量编辑选定的 .scss 文件（可能是 _variabes.scss）。

您还可以在此处查看更多选项：Where to find the twitter bootstrap less files?