对主题使用 @extend 时出现意外结果 [英] Unexpected results when using @extend for themes
问题描述
我正在重构我的一些 Sass 代码,但遇到了一个奇怪的问题.我的代码目前看起来像这样:
I'm refactoring some of my Sass code and I came across a weird issue. My code currently looks like this:
// 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;
}
}
编译结果如下:
.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
) 没有附加到父选择器 (&%baseColor
)它前面的&符号?这可能是组合 &
和 %
时的错误吗?关于如何实现我想要的,还有其他解决方案吗?
What I don't understand is why my placeholder (&%baseColor
) isn't attached to the parent selector (&%baseColor
) as I added the ampersand right in front of it?
Is this maybe a bug when combining &
and %
? Is there another solution on how to achieve what I want?
编辑
好吧,我知道为什么这是不可能的.无论如何,我想要实现的目标有解决方法吗?
Alright I figured out why this isn't possible. Anyway is there a workaround for what I'd like to achieve?
推荐答案
正如您已经发现的那样,扩展会变得相当混乱.我将通过将 @content
感知混合与全局变量结合使用来解决您的问题(这使用映射,这是 3.3 的一部分......您可以使用列表列表来解决,但它是不那么优雅):
Extends, as you've already discovered, can get rather messy. I would go about solving your problem by using an @content
aware mixin in combination with global variables (this uses mappings, which are part of 3.3... you can do it with lists of lists, but it's a little less elegant):
$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;
}
更新:既然你想保证扇区类总是在最上面,你只需要稍微切换一下即可.
Update: Since you want to guarantee that the sector class is always at the top, you just need to switch around a little.
@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;
}
}
}
这篇关于对主题使用 @extend 时出现意外结果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!