我有一个使用Compass和SASS / SCSS的项目.这是一个单页面应用程序.
我有一个master .scss文件,它包含我的所有变量,mixins和函数声明.
//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; }
做一个扩展是更好的,因为那个代码的重复不会遍布整个地方.这样做：
.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; }
所以我们喜欢扩展.现在唯一的问题是,如果我将可扩展类(.stretch)放入master.scss文件中,它会将自身复制到每个css页面.如果我将它放入base.scss文件中,Compass在编译时似乎不会识别该类,因此不会扩展它.
如何在只声明一次的情况下将css类扩展到多个文件？
解决方法
这就是占位符所做的.而不是这个：
.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,.c {
color: red;
}
即最终编译的CSS中不包含stretch类,但您仍然可以在SASS中使用它.
