导入后我可以覆盖sass变量吗？

Question

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

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

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

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

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

那么有一种方法可以在导入后覆盖sass变量吗？

编辑

我已经在github推动了这个项目 - https://github.com/murtaza52/rails-base

并且可以在localhost上访问网址:3000 /帖子/

Answer 1

这是我意识到的.您可以在导入后覆盖sass变量.但是修改将仅在覆盖后的使用中反映出来.因为navbar在你覆盖之前得到了样式$navbarBackground,所以只是覆盖变量不会改变样式.见下面的例子.

@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.

Answer 2

Bootstrap-sass 在样式中的/bootstrap/_variables.scss中定义了许多变量$brand-success: #5cb85c !default;.sass关键字!default表示:

如果尚未通过将!default标志添加到值的末尾来分配变量,则可以将其分配给变量.这意味着如果已经为变量赋值,则不会重新赋值,但如果它还没有值,则会给出一个.(→sass文档)

这意味着您只需在导入bootstrap-sass之前首先定义变量.我是这样做的:

@import "common/project_variables";
@import "bootstrap";

我的文件project_variables.scss包含 - 其中包括 - 我要覆盖的所有引导变量.

Answer 3

我是通过将单个scss文件导入我的application.scss文件来实现的.而不是写这个:

@import "bootstrap";

我首先导入变量,自定义它们,然后导入其余的引导程序.

// Core variables and mixins
@import "../../../vendor/assets/stylesheets/bootstrap/variables";

$body-bg: #333333;

@import "../../../vendor/assets/stylesheets/bootstrap/mixins";

// Reset
@import "../../../vendor/assets/stylesheets/bootstrap/normalize";
@import "../../../vendor/assets/stylesheets/bootstrap/print";

// Core CSS
@import "../../../vendor/assets/stylesheets/bootstrap/scaffolding";
@import "../../../vendor/assets/stylesheets/bootstrap/type";
@import "../../../vendor/assets/stylesheets/bootstrap/code";
@import "../../../vendor/assets/stylesheets/bootstrap/grid";
@import "../../../vendor/assets/stylesheets/bootstrap/tables";
@import "../../../vendor/assets/stylesheets/bootstrap/forms";
@import "../../../vendor/assets/stylesheets/bootstrap/buttons";

// Components
@import "../../../vendor/assets/stylesheets/bootstrap/component-animations";
@import "../../../vendor/assets/stylesheets/bootstrap/glyphicons";
@import "../../../vendor/assets/stylesheets/bootstrap/dropdowns";
@import "../../../vendor/assets/stylesheets/bootstrap/button-groups";
@import "../../../vendor/assets/stylesheets/bootstrap/input-groups";
@import "../../../vendor/assets/stylesheets/bootstrap/navs";
@import "../../../vendor/assets/stylesheets/bootstrap/navbar";
@import "../../../vendor/assets/stylesheets/bootstrap/breadcrumbs";
@import "../../../vendor/assets/stylesheets/bootstrap/pagination";
@import "../../../vendor/assets/stylesheets/bootstrap/pager";
@import "../../../vendor/assets/stylesheets/bootstrap/labels";
@import "../../../vendor/assets/stylesheets/bootstrap/badges";
@import "../../../vendor/assets/stylesheets/bootstrap/jumbotron";
@import "../../../vendor/assets/stylesheets/bootstrap/thumbnails";
@import "../../../vendor/assets/stylesheets/bootstrap/alerts";
@import "../../../vendor/assets/stylesheets/bootstrap/progress-bars";
@import "../../../vendor/assets/stylesheets/bootstrap/media";
@import "../../../vendor/assets/stylesheets/bootstrap/list-group";
@import "../../../vendor/assets/stylesheets/bootstrap/panels";
@import "../../../vendor/assets/stylesheets/bootstrap/wells";
@import "../../../vendor/assets/stylesheets/bootstrap/close";

// Components w/ JavaScript
@import "../../../vendor/assets/stylesheets/bootstrap/modals";
@import "../../../vendor/assets/stylesheets/bootstrap/tooltip";
@import "../../../vendor/assets/stylesheets/bootstrap/popovers";
@import "../../../vendor/assets/stylesheets/bootstrap/carousel";

// Utility classes
@import "../../../vendor/assets/stylesheets/bootstrap/utilities";
@import "../../../vendor/assets/stylesheets/bootstrap/responsive-utilities";


body {
  padding-top: 60px;
}