使用 bootstrap-sass gem 覆盖 Rails 中的 Bootstrap 变量

Posted 2023-03-06

【中文标题】使用 bootstrap-sass gem 覆盖 Rails 中的 Bootstrap 变量

【英文标题】：Overriding Bootstrap variables in Rails with bootstrap-sass gem

【发布时间】：2013-12-24 11:53:49

【问题描述】：

我正在使用 Thomas McDonald 的 bootstrap-sass gem (Bootstrap 3.0)。我遵循了 Bootstrap and Rails Daniel Kehoe 的教程。

我有application.css.scss，顶部有以下内容：

 /*
 *= require_self
 *= require_tree .
 */

我有framework_and_overrides.css.scss，里面有这行：

@import "bootstrap";

现在我尝试覆盖引导变量 ($body-bg: #f00;) 我找到了 here 并将它们放在这两个文件中的任何一个中，但没有任何变化。我做错了什么？

【参考方案1】：

您可以通过简单地在@import 指令之前重新定义变量 来覆盖变量。

例如：

$navbar-default-bg: #312312;
$light-orange: #ff8c00;
$navbar-default-color: $light-orange;

@import "bootstrap";

【讨论】：

这行得通，除非我尝试在 @import "bootstrap" 指令之前使用引导变量时，我得到一个未定义的变量错误。即$text-color: $gray-light;

但是如果我在@import 之后重新定义它们，为什么它不起作用？ sass 不应该像其他语言一样简单地采用最后一个变量定义吗？

在使用 Sass 变量之前需要先定义它们 - 在这种情况下，如果你想重新定义一个变量，它需要在 @import 指令之前完成，这样 Bootstrap scss 文件才能使用其中。它们没有被默认值覆盖的唯一原因是因为the default values all use the !default flag，这意味着它们只会在尚未定义变量的情况下使用该值。

只是想补充一点，如果你使用 Less 会有所不同，因为它使用 variable scope 的概念（而在 Sass 中所有变量都是全局的），这允许你重新定义变量 在@import 之后 因为它们在任何内部范围之前被加载，而这些只是覆盖默认值（不需要!default）。

这是一个特殊情况.. 这是因为引导变量具有!default 限定符.. 如果您尝试使用另一个没有!default 的变量来执行此操作，它将再次被覆盖最新定义

【参考方案2】：

查看执行周期。在引导文件中，以这种方式呈现的文件，例如“获取变量>并在导航栏中应用”，这在开始执行引导文件时确实会发生。它存在于引导程序内部，查看导入的顺序流程。 , 变量从 bootstrap/variables 获取并在 bootstrap/navbar 中设置 vavbar 颜色，这将在 navbar 中使用变量 navbar-default-bg 应用颜色。

实际上程序员正在做的是在导航栏中设置颜色后尝试设置变量值。 （在“@importing bootstrap”语句之前或之后，变量变化不会改变导航栏颜色，需要在bootstrap文件中编辑）

如果要更改颜色，请查看下面的代码。

在引导文件中

// 核心变量和mixins

@import "引导程序/变量";

// 组件

@import "引导/导航";

$navbar-default-bg:red; //初始化$navbar-default-bg（导入引导/变量后）

@import "引导/导航栏";这里颜色设置正在执行”

这样就好了，分析执行周期。

但我建议使用其他手动类来应用 bg-color 而不是覆盖引导变量。

参考：https://github.com/RailsApps/rails-bootstrap/issues/12