Sass 3.2でプレースホルダーセレクターを使用して重複を避ける

Question

問題は、私のSassコードがコンパイル済みCSSファイルに重複した宣言を生成していることです。 マイサスコードは、複数のパーシャルで編成され、私は%alignrightと%alignleft含ま_placeholders.scssを持って、最終的なscreen.scssファイル

にそれらを@importています。 私はこれらを使用する_content.scssファイルを持っていますので、そのファイルの先頭に私は@import "_placeholder.scss"と_footer.scssで同じことをします。だから私は2つの場所の@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内の正しい場所に出力することができますか？

Answer 1

これは、@extendingプレースホルダではなく@include@mixinにする必要がある場所です。

// in _placeholders.scss 

@mixin alignleft { 
    text-align: left; 
} 

// in _content.scss 

div.whatever { 
    @include alignleft; 
} 

// in _footer.scss 

div.whatever-footer { 
    @include alignleft; 
}