web-dev-qa-db-ja.com

インポート後にsass変数をオーバーライドできますか？

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

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

ただし、次のことを行う場合-

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

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

Sass変数をインポートした後、オーバーライドする方法はありますか？

編集

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

そして、URLはlocalhost：3000/posts /でアクセス可能です

twitter-bootstrapsass
31
murtaza52

これが私が実現したことです。 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.
22
Kulbir Saini

Bootstrap-sassは、多くの変数を / bootstrap/_variables.scss スタイル$brand-success: #5cb85c !default;で定義しています。 sassキーワード!defaultは次を意味します。

値の最後に！defaultフラグを追加することにより、まだ割り当てられていない変数に割り当てることができます。これは、変数が既に割り当てられている場合、再割り当てされないことを意味しますが、値がまだない場合は変数が与えられます。 （ →sassドキュメント ）

つまり、bootstrap-sassをインポートする前に、変数firstを定義するだけです。私は次のようにします：

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

ファイルproject_variables.scssには、とりわけ、オーバーライドしたい変数bootstrap）がすべて含まれています。

18
Simon

私は、個々の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;
}
17
Levara

ブートストラップ変数は!defaultルールを使用します。

デフォルトのルール：

値の最後に！defaultフラグを追加することにより、まだ割り当てられていない変数に割り当てることができます。これは、変数が既に割り当てられている場合、再割り当てされないことを意味しますが、値がまだない場合は変数が与えられます。

これは次のようになります。

$example: 'value' !default;

したがって、Sass !defaultを使用することは、「これが既に割り当てられていない限り」修飾子を変数の割り当てに追加するようなものです。

1
Giovanni Far