Question

有没有办法可以导入多个框架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不允许在控制指令或mixin中使用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;
}

防止Sass框架变量冲突

0 个答案: