2

必要なときに任意のプロジェクトに適用できる別の mixin ファイルに一般的なスタイル/トリックを含めようとしています。これらのスタイルの中には、機能するために複数の要素を連携させる必要があるものがあります。

例えば：

_mixins.scss
====================
@mixin footer_flush_bottom {
    html {
        height: 100%;
    }

    body {
        min-height: 100%;
        position: relative;
    }

    #footer {
        position: absolute;
        bottom: 0;
    }
}

main.scss
====================
@import "mixins";

@include footer_flush_bottom;

html {
    background-color: $bg;
    //More stuff
}

body {
    margin: 0 auto;
    //More stuff
}

footer.scss
====================
#footer {
    height: 40px;
}

そのままでは、ミックスインは機能しますが、生成された css は、セレクターが同じであっても、メイン コードからミックスインを分離します。これの欠点は、見苦しい css と、これらをさらに含め始めるとファイル サイズが大きくなることです。

/* line 14, ../../sass/modules/_mixins.scss */
html {
  height: 100%; }

/* line 18, ../../sass/modules/_mixins.scss */
body {
  min-height: 100%;
  position: relative; }

/* line 22, ../sass/modules/_mixins.scss */
#footer {
  position: absolute;
  bottom: 0; }

/* line 19, ../../sass/modules/main.scss */
html {
  overflow-y: scroll; }

/* line 37, ../../sass/modules/main.scss */
body {
  margin: 0 auto;

/* line 1, ../sass/modules/footer.scss */
#footer {
  height: 40px;

同じセレクターをマージできるように、これを行うことができる方法はありますか? このような：

/* line 19, ../../sass/modules/main.scss */
html {
  height: 100%;
  overflow-y: scroll; }

/* line 37, ../../sass/modules/main.scss */
body {
  min-height: 100%;
  position: relative;
  margin: 0 auto;

/* line 1, ../sass/modules/footer.scss */
#footer {
  position: absolute;
  bottom: 0;
  height: 40px;}
4

1 に答える 1

5

いいえ。Sass にはセレクターをマージする方法がありません (セレクターの順序が変更されるため、これは望ましくないと見なされる可能性があります)。

実際にできることは、次のようなことだけです (または、2 つの別々の mixin を記述します)。

@mixin footer_flush_bottom {
    height: 100%;

    body {
        min-height: 100%;
        position: relative;
        @content;
    }
}

html {
    // additional html styles
    @include footer_flush_bottom {
        // additional body styles
    }
}
于 2013-10-18T14:17:50.540 に答える