7

問題は、私のSassコードがコンパイルされたCSSファイルで重複した宣言を生成していることです。私のSassコードは複数の部分で構成されており、それらを最終的なscreen.scssファイルに@importします。

と_placeholders.scssを含むが%alignrightあり%alignleftます。_content.scssこれらを使用するファイルがあるので@import "_placeholder.scss"、そのファイルの先頭にあり、_footer.scssでも同じことを行います。だから私@import "_placeholders.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の正しい場所にスタイルを出力するにはどうすればよいですか？

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 に答える