web-dev-qa-db-ja.com

Bootstrap Rails with bootstrap-sass gemの変数

私はThomas McDonaldのbootstrap-sass gem（Bootstrap 3.0）を使用しています。 Daniel Kehoeによる Bootstrap and Rails チュートリアルに従いました。

application.css.scssがあり、上部に次のものがあります。

 /*
 *= require_self
 *= require_tree .
 */

そして、framework_and_overrides.css.scssがあり、この行が含まれています：

@import "bootstrap";

今、私はbootstrap変数（$body-bg: #f00;）をオーバーライド here ]して、これらのいずれかに配置しようとしました2つのファイルが変更されることはありません。

cssruby-on-railstwitter-bootstrap
33
maik

変数を再定義するだけで変数をオーバーライドできますbefore the @importディレクティブ。

例えば：

$navbar-default-bg: #312312;
$light-orange: #ff8c00;
$navbar-default-color: $light-orange;

@import "bootstrap";
54
NARKOZ

実行サイクルを参照してください。 bootstrapファイル、この方法でレンダリングするファイルは、「変数を取得してnavbarに適用する」」など、bootstrapファイルを実行し始めたときに実際に発生します。ブートストラップ内に存在する、インポートのシーケンシャルフローを見てください。変数はブートストラップ/変数から取得し、ブートストラップ/ navbarでvavbarの色を設定します。これにより、変数navbar-default-bg。

実際にプログラマが行っているのは、navbarで色を設定した後に変数値を設定しようとすることです。 （「@ importing bootstrap」ステートメントの前後では、変数の変更はnavbarの色を変更せず、bootstrapファイル）

色を変更したい場合は、次のコードを調べてください。以下を実行する必要があります。

inside bootstrap file

//コア変数とミックスイン

@import "ブートストラップ/変数";

//コンポーネント

@import "bootstrap/navs";

$ navbar-default-bg：red; //$ navbar-default-bgを初期化（ブートストラップ/変数のインポート後）

@import "bootstrap/navbar";ここで色の設定が実行されています」

これは正常に動作し、実行サイクルを分析します。

しかし、私はbootstrap変数を上書きするのではなく、bg-colorを適用するために他の手動クラスを使用することを提案しています。

参照： https://github.com/RailsApps/Rails-bootstrap/issues/12

1
errakeshpd