Sass 使用@extend for themes时出现意外结果
我正在重构我的一些Sass代码,我遇到了一个奇怪的问题。我的代码当前如下所示:Sass 使用@extend for themes时出现意外结果,sass,Sass,我正在重构我的一些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($s
// 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;
}
编译的结果如下所示:
// 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
),因为我在它前面添加了符号和?
当组合&
和%
时,这可能是一个错误吗?关于如何实现我的目标,还有其他解决方案吗
编辑
好吧,我发现这是不可能的。不管怎样,我想实现的目标有解决办法吗?正如您已经发现的,扩展可能会变得相当混乱。我将通过使用一个支持
@content
的mixin和全局变量来解决您的问题(它使用映射,这是3.3的一部分…您可以使用列表列表来完成,但它不那么优雅):
输出:
.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;
}
}
}
您是否同意使用extends来实现此目的?@cimmanon我以前在扇区css mixin中使用了所有特定于扇区颜色的css,并在其他文件中使用了这些选择器的所有其他内容(边距、填充等)。我现在想从这些文件中访问正确的颜色,以便选择器只在一个位置列出。。。希望你明白我的意思。除了extend之外,我还接受其他解决方案。这是一个很好的方法!不幸的是,它不能完全满足我的需要,因为我有更多的嵌套选择器:知道如何解决这个问题吗?扇区类应始终位于父级上。是否有机会在不扩展的情况下合并具有相同属性的选择器?你只需要切换一下选择器,但它仍然是相同的概念。为第二个示例添加了一个示例。还有一个问题。它在我本地的机器上不工作。我已将Sass更新为3.3.0.alpha版,但我始终会收到一个语法错误
“语法错误:在“(Househouse:expected”)”之后无效的CSS”,was::“第7行
有没有任何我可能错过的提示?听起来像是版本问题。如果您在不同于更新gem所在的控制台上运行watch命令,那么它可能会导致您仍然在运行旧gem。在这方面,恐怕我无能为力了。