Question

我正在重构一些我的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）没有附加到父选择器（&%baseColor），因为我在其前面添加了＆符号？结合&和%时，这可能是一个错误吗？是否有另一种解决方案如何实现我的目标？

修改

好吧我发现why这是不可能的。无论如何，我想要实现的目标是什么？

Answer 1

正如您已经发现的那样，扩展可能会变得相当混乱。我会通过使用@content感知mixin和全局变量来解决你的问题（这使用映射，它是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;
        }
    }
}

使用@extend进行主题时出现意外结果

1 个答案: