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 / posts /

访问该网址

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

我是通过将单个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;
}

Answer 3

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

如果尚未通过将！default标志添加到值的末尾来分配变量，则可以将其分配给变量。这意味着如果已经为变量赋值，则不会重新赋值，但如果它还没有值，则会给出一个。（→sass documentation）

这意味着您只需在导入bootstrap-sass之前定义变量 first 。我是这样做的：

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

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

Answer 4

引导变量使用!default规则。

默认规则：

如果尚未通过将！default标志添加到值的末尾来分配变量，则可以将其分配给变量。这意味着如果已经为变量赋值，则不会重新赋值，但如果它还没有值，则会给出一个。

这就是它的样子：

$example: 'value' !default;

所以使用Sass !default就像在你的变量作业中添加“除非已经分配”限定符

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

4 个答案: