CSS 使用 bootstrap-sass gem 覆盖 Rails 中的 Bootstrap 变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20435612/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overriding Bootstrap variables in Rails with bootstrap-sass gem
提问by Mike Glaz
I am using the bootstrap-sassgem (Bootstrap 3.0) by Thomas McDonald. I've followed the
Bootstrap and Railstutorial by Daniel Kehoe.
我正在使用bootstrap-sassThomas McDonald的gem (Bootstrap 3.0)。我遵循了Daniel Kehoe的
Bootstrap 和 Rails教程。
I have application.css.scsswhich has the following at the top:
我application.css.scss在顶部有以下内容：
/*
*= require_self
*= require_tree .
*/
And I have framework_and_overrides.css.scsswhich has this line in it:
我有framework_and_overrides.css.scss这行：
@import "bootstrap";
Now I tried overriding bootstrap variables ($body-bg: #f00;) I found hereand placing them in either of these two files but nothing changes. What am I doing wrong?
现在我尝试覆盖$body-bg: #f00;在此处找到的引导程序变量 ( )并将它们放置在这两个文件中的任何一个中，但没有任何变化。我究竟做错了什么？
回答by NARKOZ
You can override variables by simply redefining the variable beforethe @importdirective.
您可以通过简单地在指令之前重新定义变量来覆盖变量@import。
For example:
例如：
$navbar-default-bg: #312312;
$light-orange: #ff8c00;
$navbar-default-color: $light-orange;
@import "bootstrap";
回答by errakeshpd
see the execution cycle. in the bootstrap file, files rendering in this manner such us "get variable > and apply in navbar" this really happen when started to execute the bootstrap file. Its present inside of the bootstrap, look the sequential flow of importing . , the variable are getting from bootstrap/variables and setting up the vavbar color in bootstrap/navbar, this applying the color in navbar with the variable navbar-default-bg.
查看执行周期。在引导文件中，文件以这种方式呈现，例如我们“获取变量> 并在导航栏中应用”，这在开始执行引导文件时确实发生。它出现在 bootstrap 里面，看一下导入的顺序流程。，变量从 bootstrap/variables 获取并在 bootstrap/navbar 中设置 vavbar 颜色，这将使用变量navbar-default-bg.
what actually programmers are doing is trying to setup the variable value after setting up the color in navbar. (before or after "@importing bootstrap" statement,the variable changes will not make changes in the navbar color, need to edit in the bootstrap file)
实际程序员所做的是在导航栏中设置颜色后尝试设置变量值。（在“@importing bootstrap”语句之前或之后，变量更改不会使导航栏颜色发生变化，需要在引导文件中进行编辑）
look into the code below if you want to change the color you have to do the following.
如果您想更改颜色，请查看下面的代码，您必须执行以下操作。
inside bootstrap file
// Core variables and mixins
@import "bootstrap/variables";
// Components
@import "bootstrap/navs";
$navbar-default-bg:red; // initialize the $navbar-default-bg(after importing bootstrap/variables)
@import "bootstrap/navbar"; here the color setting is performing"
内引导文件
// 核心变量和mixin
@import "引导程序/变量";
// 成分
@import "bootstrap/navs";
$navbar-default-bg:red; // 初始化$navbar-default-bg（导入引导程序/变量后）
@import "引导程序/导航栏"; 这里的颜色设置正在执行”
this will work fine, analyze the execution cycle.
这将正常工作，分析执行周期。
but I am suggesting use the other manual classes for applying the bg-color instead of over riding bootstrap variable.
但我建议使用其他手动类来应用 bg-color 而不是过度使用引导程序变量。
Ref : https://github.com/RailsApps/rails-bootstrap/issues/12
