インポート後にsass変数を上書きすることはできますか？

Question

私は自分のレールアプリでbootstrap-sassを使用しています。私は、bootstrap-sass変数$ navbarBackgroundをオーバーライドしたいと思います。 bootstrap-sassは色の変数も定義します。だから、16進コードを使用する代わりに、それが定義する変数$ redを使用したいと思います。私は次の操作を行う場合

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

は、しかし -

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

をこれは、変数$赤として私にエラーを与えるだけで次の行にインポートされ、ブートストラップファイルを定義しています。

インポートされた後で、私はsass変数をオーバーライドする方法はありますか？私はgithubの上のプロジェクトプッシュしている

EDIT

からhttps://github.com/murtaza52/rails-base

とURLがローカルホスト上でアクセス可能である：ここでは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

個別の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

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

変数に割り当てられていない場合は、！defaultフラグを値の最後に追加して割り当てることができます。つまり、変数がすでに割り当てられている場合は、再割り当てされませんが、値がまだない場合は、割り当てられます。 （→sass documentation）

これはあなただけで、ブートストラップ・SASSをインポートする前に、最初あなたの変数を定義しなければならないことを意味。私はそうのようにそれを実行します。私のファイルproject_variables.scssが含まれてい

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

は - なかでも - 正確にすべてのブートストラップ変数は、私がオーバーライドしたいです。

Answer 4

ブートストラップ変数は!defaultルールを使用します。 ！の彼らはすでに値の最後に、デフォルトのフラグを追加することによって、割り当てられていない場合は、変数に割り当てることができます

：

デフォルトルール。つまり、変数がすでに割り当てられている場合は、再割り当てされませんが、値がまだない場合は、割り当てられます。

これは、それがどのように見えるされていますあなたの変数の割り当てにトリックをした