40

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

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

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

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

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

那么有没有办法在导入 sass 变量后覆盖它们？

编辑

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

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

4

4 回答 4

24

这是我意识到的。您可以在导入 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.
于 2012-08-03T05:50:13.533 回答
21

Bootstrap-sass 在/bootstrap/_variables.scss中以 style定义了许多变量$brand-success: #5cb85c !default;。sass 关键字的!default意思是：

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

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

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

我的文件project_variables.scss包含我想要覆盖的所有引导变量。

于 2015-12-30T09:57:03.323 回答
17

我通过将单个 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;
}
于 2013-12-22T16:16:09.553 回答
2

引导变量使用该!default规则。

默认规则：

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

这是它的样子：

$example: 'value' !default;

所以使用 Sass!default就像在你的变量赋值中添加一个“除非这已经被赋值”限定符

于 2016-08-11T15:36:21.213 回答