Предотвратить столкновения переменных Sass Framework

Question

Есть ли способ, которым я мог бы импортировать несколько файлов Sass фреймворка таким образом, чтобы каждый фреймворк использовал свои собственные переменные без переопределения / коллизии переменных одного фреймворка с переменными другого, в то время как я все еще мог бы получить доступ к переменные одного или обоих из этих каркасов в последующих стилях при необходимости?

Например:

каркасного а-variables.scss:

$border-color: green !default;

рамка-а-box.scss:

.box-a { border: 1px solid $border-color; }

каркасного б-variables.scss:

$border-color: red !default;

каркасного б-box.scss:

.box-b { border: 1px solid $border-color; }

приложение-styles.scss:

@import 'framework-a-variables';
@import 'framework-a-box';
@import 'framework-b-variables';
@import 'framework-b-box';

Это приведет к тому, что элемент с классом box-b будет иметь зеленую рамку из-за того, как работают объявления переменных Sass и ключевое слово! Default. Аналогичным образом, если бы я хотел использовать $ border-color, как определено framework-b-variables.scss, например, в button-styles.scss, я бы не смог.

Я пытался использовать селекторы-заполнители, чтобы ограничить импорт Sass, чтобы переменные, инициализированные каждой платформой, использовались только для других импортированных файлов этой инфраструктуры. Кажется, что это позволяет охватывать переменные по желанию, но ни один из стилей не компилируется, если я не расширил селектор-заполнитель, но Sass требует, чтобы директивы расширения использовались только внутри правил, и я не хотел бы повышать специфичность всех моих селекторов только для того, чтобы достичь этого.

%framework-a-scope {
  @import 'framework-a-variables';
  @import 'framework-a-box';
}

%framework-b-scope {
  @import 'framework-b-variables';
  @import 'framework-b-box';
}

@extend %framework-a-scope; // This is not allowed in Sass
@extend %framework-a-scope; // This is not allowed in Sass

html {
  @extend %framework-a-scope; // Wouldn't want do this
  @extend %framework-b-scope; // Wouldn't want do this
}

Я также пытался использовать миксины для определения объема импорта Sass. Я считаю, что миксины, в отличие от extends, могут выводить правила, не будучи вложенными в правила, но Sass не допускает директивы импорта в директивах управления или миксинах.

@mixin framework-a-scope() {
  @import 'framework-a-variables'; // This is not allowed in Sass
  @import 'framework-a-box'; // This is not allowed in Sass
}

@include framework-a-scope();

Итак, есть ли способ достичь того, чего я хочу достичь? Я не против того, чтобы при необходимости явно импортировать переменные в определенных областях, например:

.my-custom-box-1 {
  @import 'framework-a-variables';
  border: 1px solid $border-color;
}

.my-custom-box-2 {
  @import 'framework-b-variables';
  border: 1px solid $border-color;
}