小编ttj*_*ttj的帖子

我试图在一个单独的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;
}

就这样,mixin可以工作,但是生成的css将mixin与主代码分开,即使它们的选择器是相同的.当我开始包含更多这些时,它的缺点是丑陋的CSS和更大的文件大小.

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

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

/* line …