Fusionando selectores de mixins

Intento contener estilos / trucos generales en un archivo de mezcla separado que se puede aplicar a cualquier proyecto cuando sea necesario. Algunos de estos estilos requieren varios elementos para funcionar juntos para funcionar.

Por ejemplo:

_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; } 

Tal como está, la mixin funciona pero la css generada separa la mixin del código principal, incluso cuando sus selectores son iguales. La desventaja de esto es el css feo y el tamaño de archivo más grande cuando empiezo a incluir más de estos.

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

¿De todos modos puedo hacer esto para que los mismos selectores puedan fusionarse? Me gusta esto:

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

No. Sass no tiene manera de fusionar selectores (esto podría considerarse indeseable, ya que alteraría el orden de los selectores).

Lo único que realmente puedes hacer es algo como esto (o escribir 2 mixins por separado):

 @mixin footer_flush_bottom { height: 100%; body { min-height: 100%; position: relative; @content; } } html { // additional html styles @include footer_flush_bottom { // additional body styles } }