[英]Overriding Bootstrap variables in Rails with bootstrap-sass gem
I am using the bootstrap-sass
gem (Bootstrap 3.0) by Thomas McDonald. 我正在使用Thomas McDonald的
bootstrap-sass
gem(Bootstrap 3.0)。 I've followed the Bootstrap and Rails tutorial by Daniel Kehoe. 我遵循了Daniel Kehoe的Bootstrap和Rails教程。
I have application.css.scss
which has the following at the top: 我有
application.css.scss
,其顶部有以下内容:
/*
*= require_self
*= require_tree .
*/
And I have framework_and_overrides.css.scss
which has this line in it: 我有
framework_and_overrides.css.scss
,里面有这一行:
@import "bootstrap";
Now I tried overriding bootstrap variables ( $body-bg: #f00;
) I found here and placing them in either of these two files but nothing changes. 现在我尝试重写引导变量(
$body-bg: #f00;
)我在这里找到并将它们放在这两个文件中的任何一个但没有任何变化。 What am I doing wrong? 我究竟做错了什么?
You can override variables by simply redefining the variable before the @import
directive. 您可以通过在
@import
指令之前重新定义变量来覆盖变量。
For example: 例如:
$navbar-default-bg: #312312;
$light-orange: #ff8c00;
$navbar-default-color: $light-orange;
@import "bootstrap";
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.
在bootstrap文件中,文件以这种方式呈现,例如我们“获取变量>并应用于导航栏”,这在开始执行引导文件时确实发生。 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 / navbar中设置vavbar颜色,这会在navbar中使用变量
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”语句之前或之后,变量更改不会对导航栏颜色进行更改,需要在bootstrap文件中进行编辑)
look into the code below if you want to change the color you have to do the following. 如果您想要更改您必须执行以下操作的颜色,请查看下面的代码。
inside bootstrap file
在bootstrap文件中
// Core variables and mixins
//核心变量和混合
@import "bootstrap/variables";
@import“bootstrap / variables”;
// Components
// 组件
@import "bootstrap/navs";
@import“bootstrap / navs”;
$navbar-default-bg:red;
$导航栏默认-BG:红色; // initialize the $navbar-default-bg (after importing bootstrap/variables)
//初始化$ navbar-default-bg (在导入bootstrap / variables之后)
@import "bootstrap/navbar";
@import“bootstrap / navbar”; here the color setting is performing"
这里的颜色设置正在执行“
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 参考: https : //github.com/RailsApps/rails-bootstrap/issues/12
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.