首页 文章

Bootstrap自定义变量RASS SASS

提问于
浏览 次
2

在 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
ruby-on-rails twitter-bootstrap sass

2 回答

  • 3

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

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

    如果你想测试它，添加到你的bootstrap_custom.css，如：

    body {
  background-color: $black;
}

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

    回复于
  • 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; }

    即使在黑色之后宣布红色，也会产生黑色的身体背景

    回复于

相关问题