7

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

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

如果我刚@import "_placeholders.scss"开始screen.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 中的正确位置？

4

1 回答 1

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;
}
于 2012-10-08T01:45:02.553 回答