我可以在导入后覆盖 sass 变量吗? [英] can I override sass variables after they have been imported?

问题描述

我在 Rails 应用中使用了 bootstrap-sass.我想覆盖 bootstrap-sass 变量 $navbarBackground.bootstrap-sass 还定义了颜色变量.因此，我想使用它定义的变量 $red 而不是使用十六进制代码.

$navbarBackground: #9d261d;@import "引导程序";

但是，如果我执行以下操作 -

$navbarBackground: $red;@import "引导程序";

它会给我一个错误，因为变量 $red 只定义了在下一行导入的引导程序文件.

那么有没有办法在导入后覆盖 sass 变量?

编辑

我已将项目推送到 github - https://github.com/murtaza52/rails-base

并且可以在 localhost:3000/posts/上访问该 url

解决方案

这是我意识到的.您可以在导入后覆盖 sass 变量.但是修改只会体现在覆盖后的用法上.由于 navbar 在覆盖 $navbarBackground 之前获得了样式，因此仅覆盖变量不会改变样式.见下面的例子.

@import "bootstrap";@navbarBackground: $red;//这不起作用.导航栏仍然是相同的颜色.//但是如果你再次为导航栏编写样式.navbar-inner { 背景:$navbarBackground;}//现在，导航栏将有一个红色背景@import "引导程序";$blue: $white;//在此行之后，每当您引用 $blue 时，它​​都会生成白色.

I am using bootstrap-sass in my rails app. I want to override a bootstrap-sass variable $navbarBackground. bootstrap-sass also defines variables for colors. So instead of using the hex code I would like to use the variable $red that it defines.

$navbarBackground: #9d261d;
@import "bootstrap";

However if I do the following -

$navbarBackground: $red;
@import "bootstrap";

It will give me an error as the variable $red is only defined the bootstrap file which is imported in the next line.

So is there a way I can override sass variables after they have been imported ?

EDIT

I have pushed the project on github - https://github.com/murtaza52/rails-base

And the url is accessible on localhost:3000/posts/

解决方案

Here is a what I realized. You can override sass variables after they have been imported. But the modification will be reflected only in the usage after overriding. Since navbar got styles before you overrode the $navbarBackground, just overriding the variable won't change styling. See below example.

@import "bootstrap";
@navbarBackground: $red;
// This doesn't work. Navbar will still be same color.
// But if you do write styles for navbar again
.navbar-inner { background: $navbarBackground; }
// Now, Navbar will have a red background

@import "bootstrap";
$blue: $white;
// After this line, whenever your reference $blue, it'll generate white color.

这篇关于我可以在导入后覆盖 sass 变量吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！