对主题使用@extend时出现意外的结果

我重构了一些我的Sass代码，并且遇到了一个奇怪的问题。 我的代码目前看起来像这样：

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

编译结果如下所示：

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

但是我需要的是这样的：

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

我不明白为什么我的占位符（ &%baseColor ）没有附加到父select器（ &%baseColor ），因为我在它前面添加了＆符号？ 结合&和%时，这可能是一个错误吗？ 是否有另一个解决scheme如何实现我想要的？

编辑

好吧，我想出了为什么这是不可能的。 无论如何，有什么我想达到什么解决方法？

Answer 1

正如你已经发现的那样，延伸会变得相当混乱。 我会去解决你的问题，通过使用@content意识混合与全局variables（这使用映射，这是3.3的一部分…你可以做到与列表清单，但它有点不雅）：

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

输出：

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

更新 ：由于您要保证部门级别始终位于顶部，因此您只需切换一下即可。

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