У меня есть проект, который используетCompass с участиемSASS/SCSS, Это одностраничное приложение.

У меня есть основной файл .scss, который содержит все моиvariables, mixins а такжеfunction деклараций.

//Master.scss 
$foo: 'bar';

@function border($color) {
  @return 1px solid $color;
}

// etc.

У меня есть файл base.scss, в котором находится главный пользовательский интерфейс css.

Моя система использует AMD для импорта других модулей позже, после загрузки. Это означает, что некоторые таблицы стилей загружаются после факта.

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

Теперь я предпочитаю использовать@extend надmixins где я повторяю тот же код. Такие как:

.a { @extend .stretch; }

Вместо:

.a { @include stretch(); },

Которые оба дают одинаковый результат:

.a { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; }

Делатьextend лучше, так как тогда повторение этого кода не разбрызгивается повсюду. Делая это:

.stretch { @include stretch() }
.a { @extend .stretch; }
.b { @extend .stretch; }
.c { @extend .stretch; }

Только производит:

.stretch, .a, .b, .c { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; }

В отличие от:

.a { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; }
.b { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; }
.b { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; }

Так нам нравитсяextend, Теперь единственная проблема заключается в том, что если я поставлю расширяемый класс (.stretch) в файл master.scss, он будет копировать себя на каждую страницу CSS. Если я помещу его в файл base.scss, Compass, похоже, не распознает класс при компиляции и поэтому не расширяет его.

Не уверен, что лучший способ решить это. Мой точный вопрос:

Как расширить класс css на несколько файлов, объявив его только один раз?