Unione di selettori da mixins

Sto cercando di contenere stili / trucchi generali in un file mixin separato che può essere applicato a qualsiasi progetto quando è necessario. Alcuni di questi stili richiedono che più elementi lavorino insieme per funzionare.

Per esempio:

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

Così com’è, il mixin funziona ma il css generato separa il mixin dal codice principale, anche quando i loro selettori sono gli stessi. Il lato negativo di questo è brutto css e file di dimensioni maggiori quando comincio ad includere più di questi.

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

Posso comunque fare in modo che gli stessi selettori possano essere uniti? Come questo:

 /* 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 non ha modo di unire selettori (questo potrebbe essere considerato indesiderabile, in quanto altererebbe l’ordinamento dei selettori).

L’unica cosa che puoi fare è qualcosa di simile (o scrivere 2 mixin separati):

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