40

Railsアプリでbootstrap-sassを使用しています。bootstrap-sass変数$navbarBackgroundをオーバーライドしたいと思います。bootstrap-sassは、色の変数も定義します。したがって、16進コードを使用する代わりに、それが定義する変数$redを使用したいと思います。

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

しかし、私が次のことをすると-

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

変数$redは、次の行にインポートされるブートストラップファイルのみが定義されているため、エラーが発生します。

それで、インポートされた後にsass変数をオーバーライドする方法はありますか？

編集

プロジェクトをgithubにプッシュしました-https ://github.com/murtaza52/rails-base

そして、URLはlocalhost：3000 /posts/からアクセスできます。

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の多くの変数をスタイルで定義しています$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 に答える