Risultati imprevisti quando si utilizza @extend per temi

Sto refactoring un po ‘del mio codice Sass e mi sono imbattuto in un problema strano. Il mio codice al momento è simile a questo:

// household $household_Sector: 'household'; $household_BaseColor: #ffc933; // sports $sports_Sector: 'sports'; $sports_BaseColor: #f7633e; // the mixin to output all sector specific css @mixin sector-css($sector_Sector,$sector_BaseColor) { .sector-#{$sector_Sector} { &%baseColor { background-color: $sector_BaseColor; } } } // execute the mixin for all sectors @include sector-css($household_Sector, $household_BaseColor); @include sector-css($sports_Sector, $sports_BaseColor); .product-paging { h2 { @extend %baseColor; } } 

DEMO

Il risultato compilato si presenta così:

 .product-paging h2.sector-household { background-color: #ffc933; } .product-paging h2.sector-sports { background-color: #f7633e; } 

Ma quello di cui ho bisogno è questo:

 .sector-household.product-paging h2 { background-color: #ffc933; } .sector-sports.product-paging h2 { background-color: #f7633e; } 

Quello che non capisco è perché il mio segnaposto ( &%baseColor ) non è collegato al selettore genitore ( &%baseColor ) quando ho aggiunto la e commerciale proprio di fronte ad esso? È forse un bug quando si combinano & e % ? C’è un’altra soluzione su come ottenere ciò che voglio?

MODIFICARE

Bene, ho capito perché non è ansible. Comunque c’è una soluzione per quello che mi piacerebbe ottenere?

Estende, come hai già scoperto, può diventare piuttosto disordinato. Vorrei risolvere il tuo problema usando un mixin @content in combinazione con variabili globali (questo usa i mapping, che fanno parte del 3.3 … puoi farlo con liste di liste, ma è un po ‘meno elegante):

 $base-color: null; // don't touch $accent-color: null; // don't touch $sections: ( household: ( base-color: #ffc933 , accent-color: white ) , sports: ( base-color: #f7633e , accent-color: white ) ); // the mixin to output all sector specific css @mixin sector-css() { @each $sector, $colors in $sections { $base-color: map-get($colors, base-color) !global; $accent-color: map-get($colors, accent-color) !global; &.sector-#{$sector} { @content; } } } .product-paging { @include sector-css() { h2 { background-color: $base-color; } } } 

Produzione:

 .product-paging.sector-household h2 { background-color: #ffc933; } .product-paging.sector-sports h2 { background-color: #f7633e; } 

Aggiornamento : Dal momento che si desidera garantire che la class del settore sia sempre al top, è sufficiente spostarsi un po ‘.

 @mixin sector-css() { @each $sector, $colors in $sections { $base-color: map-get($colors, base-color) !global; $accent-color: map-get($colors, accent-color) !global; .sector-#{$sector} { @content; } } } @include sector-css() { &.product-paging { h2 { background-color: $base-color; } h3 { background-color: #CCC; } h2, h3 { color: $accent-color; } } }