從mixins中合併選擇器

Question

我試圖在一個單獨的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;} 

Answer 1

號薩斯沒有合併選擇的方式（這可以被認爲是不可取的，因爲它會改變選擇的順序）。

你真的可以做的唯一事情是這樣的（或寫2分獨立的混入）：

@mixin footer_flush_bottom { 
    height: 100%; 

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

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