使用Sass 3.2中的占位符选择器避免重复

Question

问题是我的Sass代码在编译的CSS文件中生成重复的声明.我的Sass代码以多个部分组织,我将它们导入最终的screen.scss文件

我有一个_placeholders.scss包含%alignright和%alignleft.我有一个_content.scss文件使用这些,所以我@import "_placeholder.scss"在该文件的顶部,我在_footer.scss中也这样做.所以我猜@import "_placeholders.scss"在2个地方导致重复？

如果我刚刚@import "_placeholders.scss"开始screen.scss使它们全局可访问,那么它会与CSS声明的顺序混淆.使用占位符选择器的第一个CSS选择器将按照我的顺序插入@import "_placeholders.scss",而不是在我的位置@import "_conntent.scss".

例如,在screen.scss中:

@import "placeholders";
@import "reset";
@import "typography"
@import "content" // uses placeholder %alignleft
@import "footer" // uses placeholder alignleft

生成的CSS:

/* Content styles that use placeholders */
/* reset styles */
/* typography styles  */
/* expected order of content styles  */
/* footer styles  */

如何避免重复并将样式输出到编译的CSS中的正确位置？

Answer 1

这是您需要@includea@mixin而不是@extending占位符的地方。

// in _placeholders.scss

@mixin alignleft {
    text-align: left;
}

// in _content.scss

div.whatever {
    @include alignleft;
}

// in _footer.scss

div.whatever-footer {
    @include alignleft;
}