web-dev-qa-db-de.com

Überschreiben von Bootstrap-Variablen in Rails mit Bootstrap-sass gem

Ich benutze den bootstrap-sass gem (Bootstrap 3.0) von Thomas McDonald. Ich habe das Bootstrap und Rails Tutorial von Daniel Kehoe verfolgt. 

Ich habe application.css.scss, der oben Folgendes hat:

 /*
 *= require_self
 *= require_tree .
 */

Und ich habe framework_and_overrides.css.scss, der diese Zeile enthält:

@import "bootstrap";

Jetzt habe ich versucht, Bootstrap-Variablen ($body-bg: #f00;) zu überschreiben. Ich habe here gefunden und sie in eine dieser beiden Dateien eingefügt, aber es ändert sich nichts. Was mache ich falsch?

33
mikeglaz

Sie können Variablen überschreiben, indem Sie einfach die Variable before die @import-Direktive neu definieren. 

Zum Beispiel:

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

@import "bootstrap";
54
NARKOZ

siehe den Ausführungszyklus. In der Bootstrap-Datei werden Dateien, die auf diese Weise gerendert werden, wie "get variable> und gelten in der Navbar", wirklich beim Start der Bootstrap-Datei auftreten. Sie befindet sich im Inneren des Bootstraps und sieht in der Reihenfolge des Importierens aus. Die Variablen werden von bootstrap/variables abgerufen und die vavbar-Farbe in bootstrap/navbar festgelegt. Dabei wird die Farbe in der navbar mit der Variable navbar-default-bg angewendet.

was Programmierer eigentlich tun, ist der Versuch, den Wert der Variablen nach dem Einstellen der Farbe in der Navigationsleiste einzustellen. (vor oder nach der Anweisung "@importing bootstrap", die Variablenänderungen nehmen keine Änderungen in der Farbe der Navigationsleiste vor, sie müssen in der Bootstrap-Datei bearbeitet werden.)

sehen Sie sich den Code unten an, wenn Sie die Farbe ändern möchten, die Sie wie folgt ausführen müssen.

in der Bootstrap-Datei

// Kernvariablen und Mixins 

@import "bootstrap/variables"; 

// Komponenten 

@import "bootstrap/navs";

$ navbar-default-bg: rot; // initialisieren Sie die $ navbar-default-bg (nach dem Import von Bootstrap/Variablen) 

@import "bootstrap/navbar"; hier führt die Farbeinstellung durch "

dies funktioniert gut, analysieren Sie den Ausführungszyklus.

ich schlage jedoch vor, die anderen manuellen Klassen für das Anwenden der BG-Farbe zu verwenden, anstatt die Bootstrap-Variable zu überschreiben.

Ref: https://github.com/RailsApps/Rails-bootstrap/issues/12

1
errakeshpd