避免使用佔位符選擇器在Sass 3.2中重複使用

Question

問題是我的Sass代碼正在編譯的CSS文件中生成重複聲明。 我的Sass代碼在多個泛音組織，我@import他們到最後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"處的位置插入，而不是在我的位置。

例如，在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 a @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; 
}