Wie funktioniert der Stylus-Variablenbereich in Dateien?

Question

Idealerweise möchte ich eine Datei „colors.styl“ einzurichten, wo ich alle Farben auf der Website wie so verwendet definieren:

// --------------- GENERAL VARIABLE DEFINITIONS 
$beige  = #F2F2F2 
$darkGrey  = #282828 
$errorRed  = #B94A48 

Wenn ich diese Variablen in anderen Dateien versuchen, Zugriff auf I erhalten nur den Variablennamen anstelle des aufgelösten Wert zurück:

body { 
    background-color: $beige; 

ich die Dateien, um die Erstellung so colors.styl, bevor der Rest geht. Verlieren Variablen ihren Gültigkeitsbereich über Dateien in Stylus?

Answer 1

Ja, Variablen verlieren ihren Umfang über Dateien.

Aber Sie können @import color in den anderen Dateien auf die Variablen zugreifen.

Answer 2

Statt @import "colors" in jeder Datei zu tun, können Sie auch eine Haupt-Loader-Datei machen, wie folgt aus:

@import "colors" 

@import "styles1" 
@import "styles2" 

Variablen in colors.styl definiert wird dann in styles1.styl und styles2.styl zur Verfügung. Die Ausgabe von Stylus wird eine große CSS-Datei sein, die alle Ihre Stile enthält.