Question

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

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

如果我只是在@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

在这个地方，您需要@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;
}

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

1 个答案: