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

Question

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

我有一个_placeholders.scss，其中包含%alignright 和%alignleft。 我有一个使用这些的_content.scss 文件，所以我在该文件的顶部@import "_placeholder.scss" 并在_footer.scss 中执行相同操作。所以我猜@import "_placeholders.scss" 在两个地方导致了重复？

如果我只是在screen.scss 的开头@import "_placeholders.scss" 使它们全局可访问，那么它会与CSS 声明的顺序混淆。 第一个使用占位符选择器的 CSS 选择器将按 I @import "_placeholders.scss" 的顺序插入，而不是 I @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

这是一个您需要 @include 和 @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;
}