2017-03-10 2 views
3

Also hier ist eine komische Sache mit der custom.scss-Datei im Bootstrap, die ich heute Abend entdeckt habe und frage mich, ob ich etwas vermisse. Nehmen wir an, ich setze die Farbe $ blue auf einen benutzerdefinierten Wert (# 000 in diesem Fall, um es einfach zu lesen) und entferne das! Default-Flag in _custom.scss, wie ich sollte. In der _variables.scss-Datei wird die Farbe $ brand-primary auf $ blue mit einem! Standard-Flag gesetzt. Dann wird der $ btn-primary-bg auf $ brand-primary gesetzt, ebenfalls mit einem! Default Flag. Also, mein Denken ist, wenn ich ein:Bootstrap 4 benutzerdefinierte Variablen nicht kaskadieren?

$blue: #000000; 

in der custom.scss Datei, sollte es dann auf jede Variable kaskadieren $ blau mit, so dass es so, dass:

$brand-primary: $blue; set to #000 and then 
$btn-primary-bg: $brand-primary; also set to #000000 

Nun, Wendungen out Ich muss alle 3 dieser Instanzen in der benutzerdefinierten Sass-Datei auflisten und ihre! Standard-Flag entfernen, bevor sie in die benutzerdefinierte Farbe wechseln würden.

So anstelle von meiner benutzerdefinierten Folie mit nur einer Zeile

$blue: #000000; 

es sein muss

$blue: #000000 ; 
$brand-primary: $blue; 
$btn-primary-bg: $brand-primary; 

vor, dass benutzerdefinierte Farbe zu diesen Klassen angewandt wird.

Fehle ich hier etwas? Müssen wir die benutzerdefinierte Farbe nicht nur einmal festlegen und dann verweist jede Variable, die darauf verweist, auch auf diese benutzerdefinierte Farbe? Scheint mir zu diesem Zeitpunkt ineffizient.

+0

Ich denke, diese Antwort wird helfen: http://Stackoverflow.com/a/38225564/171456 – ZimSystem

Antwort

0

[Link Beschreibung hier eingeben] [1] Es gibt kein Problem mit den Variablen wurden definiert. Wahrscheinlich müssen Sie die Art ändern, in der Sie sie in HTML verwendet haben. Sehen Sie sich das folgende Beispiel an, das anhand Ihrer definierten Variablen bereitgestellt wurde. Ich würde vorschlagen, die Variable "$ blue" zu entfernen und die Farbe direkt für die Variable "$ brand-primary" zu definieren!

[1]: https://jsfiddle.net/negin/t36ep4e8/