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

问题是我的Sass代码在编译的CSS文件中生成了重复的声明。 我的Sass代码被组织成多个部分，我@import它们到最终的screen.scss文件中

我有一个

\u占位符.scss

，它包含

%alignright

和

%alignleft

。 我有一个

\u content.scss

文件使用这些文件，因此我在该文件的顶部导入“\u placeholder.scss”，并在\u footer.scss中执行相同的操作。所以我猜是两个地方的

@import“\u placeholders.scss”

导致了重复

如果我只是在

screen.scss

的开头导入“\u placeholders.scss”，使它们可以全局访问，那么它会扰乱CSS声明的顺序。 第一个使用占位符选择器的CSS选择器将按I

@import“\u placeholders.scss”

的顺序插入，而不是按I

@import“\u 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中的正确位置？

这是一个需要

@包含
的位置，而不是
@扩展
占位符的位置

// in _placeholders.scss

@mixin alignleft {
    text-align: left;
}

// in _content.scss

div.whatever {
    @include alignleft;
}

// in _footer.scss

div.whatever-footer {
    @include alignleft;
}