萨斯未能@extend与家长选择创建选择

Question

我需要建立某种方式与SCSS和占位符做CSS输出

这是输出，我想

.myclass { 
    color: silver; 
} 
.myclass-gold { 
    color: gold; 
} 

---

当我尝试这一个SCSS placeholder这样

%placeholder { 
    color: silver; 
    #{&}-gold { 
    color: gold; 
    } 
} 

.myclass { 
    @extend %placeholder !optional; 
} 

我只得到这样的结果

.myclass { 
    color: silver; 
} 

黄金部分完全被丢弃。

---

我需要一个占位符，因为我用很多像选择a.myclass，input.myclass等，不想从这些

分解@export如果我不使用占位符，但随机选择和采取一些extry字节-输出不正确的，无论是

ae739ab7 { 
    color: silver; 
    #{&}-gold { 
    color: gold; 
    } 
} 

.myclass { 
    @extend ae739ab7 !optional; 
} 

产生

ae739ab7, .myclass { 
    color: silver; 
} 
ae739ab7 ae739ab7-gold, .myclass ae739ab7-gold { 
    color: gold; 
} 

---

和

ae739ab7 { 
    color: silver; 
    &-gold { 
    color: gold; 
    } 
} 

.myclass { 
    @extend ae739ab7 !optional; 
} 

给我

ae739ab7, .myclass { 
    color: silver; 
} 
ae739ab7-gold { 
    color: gold; 
} 

现在缺少这里总是选择.myclass-gold

一些魔术这可能不知？

Answer 1

仅扩展精确匹配的工作。当你这样写：

%placeholder { 
    color: silver; 
    #{&}-gold { 
    color: gold; 
    } 
} 

什么你真的创建是这样的：

%placeholder { 
    color: silver; 
} 

%placeholder %placeholder-gold { 
    color: gold; 
} 

所以，当你写：

.myclass { 
    @extend %placeholder !optional; 
} 

它只会延长%placeholder选择，而不是%placeholder-gold选择器。为了让您正在寻找的行为，你必须每一个占位符选择单独扩展：

%placeholder { 
    color: silver; 
    @at-root #{&}-gold { 
    color: gold; 
    } 
} 

@mixin placeholder { 
    & { 
     @extend %placeholder; 
     @at-root #{&}-gold { 
      @extend %placeholder-gold; 
     } 
    } 
} 

.myclass { 
    @include placeholder; 
} 

输出：

.myclass { 
    color: silver; 
} 
.myclass-gold { 
    color: gold; 
}