有没有办法我可以导入多个框架Sass文件，每个框架将使用自己的变量，而没有一个框架的变量覆盖/碰撞另一个框架的变量，而我仍然可以访问一个变量或者根据需要在后续样式中使用这两个框架？

例如：

框架-A-variables.scss：

$border-color: green !default;

框架-A-box.scss：

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

框架-B-variables.scss：

$border-color: red !default;

框架-B-box.scss：

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

APP-styles.scss：

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

由于Sass变量声明和！default关键字的工作方式，这将导致带有 box-b 类的元素具有绿色边框 . 同样，如果我想使用border-styles.scss中的framework-b-variables.scss定义的$ border-color，我将无法使用 .

我已经尝试使用占位符选择器来限定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
}

我也尝试使用mixins来限制Sass导入 . 我相信mixins与extends不同，可以输出规则而不嵌套在规则中，但是Sass不允许在控制指令或mixins中使用import指令 .

@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;
}
import sass scope