Bootstrap 自定义变量 Rails SASS

Question

在 stylesheets/bootstrap 目录中，我有：

_variables.scss 我有：

$black:                 #000 !default;
$grayDark:              #333 !default;
...
$textColor:             $grayDark !default;

这个文件被导入到 bootstrap.scss 文件中：

// Core variables and mixins
@import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
@import "bootstrap/mixins";
...

在 stylesheets 目录中，我有 bootstrap_include.scss

@import "bootstrap/bootstrap";
@import "bootstrap/responsive";

我想将默认文本覆盖为黑色，因此我创建了一个自定义变量文件并将其导入到我的自定义引导文件中

_variables_custom.scss：

$black:                 #000 !default;
$textColor:             $black !default;

然后在 bootstrap_custom.scss

@import "variables_custom"; 

终于在application.css.scss

*= require bootstrap_custom
*= require bootstrap_include

当我刷新页面时，bootstrap_custom 总是为空，我是一个 css 新手，为什么它不起作用？

谢谢

不确定这是否不错，但我使用以下方法解决了它：

我的 bootstrap_custom 现在包括

$black:                 #000 !default;
$textColor:             $black !default;
@import "bootstrap/bootstrap";
@import "bootstrap/responsive";

而我的 application.css.scss 现在只包含

*= require bootstrap_custom

Answer 1

在您的样式表中，删除 !default

也就是说，在您的文件 _variables_custom.scss - 而不是：

$black: #000 !default;
$textColor: $black !default;

改用这个：

$black: #000;
$textColor: $black;

---

!default 是一个 sass 变量标志，允许在声明 !default 之前或之后重新分配，非 !default 值总是获胜。

所以：

$foo: black;
$foo: red !default;
body { background: $foo; }

将导致黑色的主体背景，即使红色是在黑色之后声明的

Answer 2

虽然我们在谈论变量，但与 CSS 无关。在这种情况下，变量由 SASS/Compass 使用，这是一个 CSS 预处理器工具，Rails 使用它来更轻松地使用 CSS（例如，通过使用变量）。

因此，当您在文件中插入变量并让其单独处理时，它不会产生任何 CSS 代码，除非您在有效的 CSS 属性中使用 then。

如果您想对其进行测试，请在 bootstrap_custom.css 中添加如下内容：

body {
  background-color: $black;
}

你会看到你的 $black 变量被使用了。