Как область переменных Stylus работает с файлами?

В идеале я хотел бы настроить один файл "colors.styl", где я могу определить все цвета, используемые на сайте, например:

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

Когда я пытаюсь получить доступ к этим переменным в других файлах, я просто возвращаю имя переменной вместо разрешенного значения:

body {
  background-color: $beige;

Я компилирую файлы в порядке, так что colors.styl идет перед остальными. Переменные теряют свою область видимости в файлах в Stylus?

Ответ 1

Вместо того, чтобы делать @import "colors" в каждом файле, вы также можете сделать файл основного загрузчика, например:

 @import "colors"

 @import "styles1"
 @import "styles2"

Переменные, определенные в colors.styl, будут доступны в styles1.styl и styles2.styl. Выход из стилуса будет одним большим css файлом, содержащим все ваши стили.

Ответ 2

Да, переменные теряют свою область видимости в файлах.

Но вы можете @import color в других файлах получить доступ к переменным.