从mixins合并选择器 [英] Merging selectors from mixins

问题描述

我试图在一个单独的mixin文件中包含一般样式/技巧，当需要时可以应用到任何项目。这些样式中的一些需要多个元素协同工作才能正常工作。

I'm trying to contain general styles/tricks in a separate mixin file which can be applied to any project when they're needed. Some of these styles require multiple elements to work together in order to work.

例如：

_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从主代码，即使它们的选择器是相同的。

As it is, the mixin works but the generated css separates the mixin from the main code, even when their selectors are the same. The downside to this is ugly css and larger file size when I start including more of these.

/* 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;

有没有我可以做到这一点，以便可以合并相同的选择器？像这样：

Is there anyway I can do this so that same selectors can be merged? Like this:

/* 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;}

推荐答案

Sass没有合并选择器的方法（这可能被认为是不合需要的，因为它会改变选择器的顺序）。

No. Sass has no way of merging selectors (this could be considered undesirable, as it would alter the ordering of the selectors).

你唯一可以做的是（或写2个单独的mixin）：

The only thing you can really do is something like this (or write 2 separate mixins):

@mixin footer_flush_bottom {
    height: 100%;

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

html {
    // additional html styles
    @include footer_flush_bottom {
        // additional body styles
    }
}

这篇关于从mixins合并选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！