SASS - 跨多个文件扩展类

Question

我有一个使用一个项目Compass有SASS/SCSS.这是一个单页面应用程序.

我有一个拥有所有我的主人.scss文件variables,mixins并function声明.

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

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

// etc.

我有一个base.scss文件,具有主UI的CSS.

我的系统在加载后使用AMD稍后导入其他模块.这意味着一些样式表在事后加载.

每个模块,或'App的样式表导入master .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.现在唯一的问题是,如果我将可扩展的class(.stretch)放入master.scss文件中,它会将自身复制到每个css页面.如果我将它放入base.scss文件中,Compass在编译时似乎不会识别该类,因此不会扩展它.

不确定解决这个问题的最佳方法是什么.那么我的确切问题是:

如何在只声明一次的情况下将css类扩展到多个文件？

Answer 1

这就是占位符所做的.而不是这个:

.stretch { color: #F00 }
.a { @extend .stretch; }
.b { @extend .stretch; }
.c { @extend .stretch; }

用这个:

%stretch { color: #F00 }
.a { @extend %stretch; }
.b { @extend %stretch; }
.c { @extend %stretch; }

它将产生以下css:

.a, .b, .c {
  color: red; 
}

即,最终编译的CSS中不包含stretch类,但您仍然可以在SASS中使用它.