SASS-将类扩展到多个文件 [英] SASS - Extend class across multiple files
问题描述
我有一个项目，该项目使用 Compass 和 SASS / SCSS 。这是一个单页应用程序。
I have a project that uses Compass with SASS/SCSS. It is a single page application.
我有一个主.scss文件，该文件包含我所有的变量， mixins 和函数声明。
I have a master .scss file that holds all of my variables, mixins and function declarations.
//Master.scss
$foo: 'bar';
@function border($color) {
@return 1px solid $color;
}
// etc.
我有一个base.scss文件
I have a base.scss file that has the main UI's css.
我的系统稍后在加载后使用AMD导入其他模块。这意味着事后会加载一些样式表。
My system uses AMD to import other modules later on, after load. This means some stylesheets are loaded after the fact.
每个模块或 App的样式表导入主.scss文件，该文件具有所有变量，等等。master.scss没有有任何实际的类声明，因此在加载模块时没有重复的导入。
Each module, or 'App's stylesheet imports the master .scss file, which has all of the variables, etc. The master.scss does not have any actual class declarations, so there are no duplicate imports when a module is loaded.
现在，我更喜欢使用 @extend mixins 在这里重复相同的代码。例如：
Now, I prefer using @extend over mixins where I am repeating the same code. Such as:
.a { @extend .stretch; }
而不是：
.a { @include stretch(); },
两者都会产生相同的结果：
Which both produce the same result:
.a { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; }
进行扩展更好，因为重复该代码不会四处散布。这样做：
Doing an extend is better, as then a repeat of that code is not splattered all over the place. Doing this:
.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 。现在唯一的问题是，如果我将可扩展类（ .stretch ）放入master.scss文件，它将自身复制到每个CSS页面。如果我将其放入base.scss文件中，Compass似乎在编译时无法识别该类，因此也不会扩展它。
So we like extend. Now the only problem, is that if I put the extendable class (.stretch) into the master.scss file, it will copy itself to every single css page. If I put it into the base.scss file, Compass does not seem to recognize the class when compiling and so does not extend it.
不确定如何解决此问题的最佳方法是。那么，我的确切问题是：
Not sure what the best way to go to solve this is. My exact question then, is:
推荐答案
这就是占位符的作用。代替此：
That's what placeholders made for. Instead of this:
.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中使用它。
I.e. the stretch class is not included in the final compiled CSS, but you could still use it in SASS.
这篇关于SASS-将类扩展到多个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
