W jaki sposób zakres zmiennych Stylus działa między plikami?

Question

Idealnie, chciałbym założyć jeden plik „colors.styl”, w którym można zdefiniować wszystkie kolory używane w całej witrynie tak:

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

Podczas próby dostępu do tych zmiennych w innych plikach, ja po prostu nazwę zmiennej z powrotem zamiast rozwiązany wartości:

body { 
    background-color: $beige; 

mam kompilacji plików w kolejności tak colors.styl idzie przed resztą. Czy zmienne tracą zasięg w plikach w Stylusie?

Answer 1

Tak, zmienne tracą swój zasięg między plikami.

Ale można uzyskać inne pliki w celu uzyskania dostępu do zmiennych za pomocą @import color.

Answer 2

Zamiast robić @import "colors" w każdym pliku, można również dokonać główny plik programu ładującego, jak to:

@import "colors" 

@import "styles1" 
@import "styles2" 

Zmienne zdefiniowane w colors.styl będzie wtedy dostępna w styles1.styl i styles2.styl. Wyjście z rysika będzie jednym wielkim plikiem css zawierającym wszystkie twoje style.