How does Stylus variable scope work across files?

Question

Ideally, I'd like to set up one file "colors.styl" where I can define all the colors used across the site like so:

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

When I try accessing these variables in other files, I just get the variable name back instead of the resolved value:

body {
  background-color: $beige;

I'm compiling the files in order so colors.styl goes before the rest. Do variables lose their scope across files in Stylus?

Answer 1

Instead of doing @import "colors" in every file, you can also make a main loader file, like this:

 @import "colors"

 @import "styles1"
 @import "styles2"

Variables defined in colors.styl will then be available in styles1.styl and styles2.styl. Output from stylus will be one big css file containing all your styles.