Как правильно подключать переменные в несколько файлов?

Question

[AlexandrKom]

Подскажите, как использовать переменные, если я хочу сделать стили для отдельных блоков отдельными файлами, вот так:

/scss  /*папка стилей*/
- main.scss /* главный файл стилей куда подключаю все остальные стили для блоков*/
- _header.scss /* файл стилей для хедера*/
- _content.scss /* файл стилей для блока*/
...
- _footer.scss /* файл стилей с футера */

В чем собственно вопрос, есть переменные для всего проекта, например $base-font-size: 16; такие переменные я храню в main.scss, и при их упоминании в подключаемых файлах, например в _header.scss - я получу ошибку, дескать _header.scss - не знает что такое $base-font-size.

Что делать? Выносить такие переменные в отдельный файл и делать @import "_project-variables.scss"; в каждом подключаемом стиле? Как то это не тру.. Может, подскажете более оптимальный метод?

Answer 1

[outcastik]

Тру - это делать правильную структуру файлов. Например как в шаблоне 7-1 https://github.com/HugoGiraudel/sass-boilerplate

Comments

[AlexandrKom]

Немного странная область видимости получается у sass:
когда переменные были в main - подключаемые файлы не видели их,
когда вынес их в отдельный файл (как сделано в boilerplate) и подключил его к main - все остальные подключаемые файлы переменные увидели.

И да, структура данного шаблона это то к чему я стремился. Благодарю!

Answer 2

[Алексей Уколов]

Выносить такие переменные в отдельный файл и делать Dmitrijs Balcers "_project-variables.scss"; в каждом подключаемом стиле?

Именно так и тру. Вы можете, например, наделать миксинов, которые используют эти переменные и подключать их, скрыв таким образом само подключение переменных, но это те же яйца, только сбоку.
Для Рельс есть gem, который позволяет импортировать целые директории, но опять - от импорта переменных это не спасает, только упрощает его.