ruby-on-rails - 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";
...

在样式表目录中，我有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

score 3 · Accepted Answer

在您的样式表中，删除!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; }

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

score 1 · Accepted Answer

当我们谈论变量时，没有什么与 CSS 相关的。在这种情况下，变量被 SASS/Compass 使用，这是一个 CSS 预处理器工具，Rails 使用它来使 CSS 的使用更容易（例如，通过使用变量）。

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

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

body {
  background-color: $black;
}

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

2 回答 2