我有以下Sass占位符,我想扩展它。
%btn
// ...button styling...
&[disabled], &.btn--disabled
color: red
.btn-primary
@extend %btn
CSS输出如下:
[disabled].btn-primary, .btn--disabled.btn-primary{ color: red; }
当我想获得以下内容时:
.btn-primary[disabled], .btn-primary.btn--disabled { color: red; }
我不明白为什么输出顺序与指定顺序不一样。我怎么能改变它?
答案 0 :(得分:4)
我认为您所追求的是以下内容:
%btn[disabled], %btn.btn--disabled
color: red
.btn-primary
@extend %btn
为了帮助概念化生成的CSS的结构,请记住%placeholder
是一个将被@extend
选择器替换的标记。
修改强>
实际上,这仍然是输出
[disabled].btn-primary, .btn--disabled.btn-primary {
color: red; }
我不希望......从语法上讲,[disabled].btn-primary
与.btn-primary[disabled]
相同,但令人讨厌的是源序排不受尊重。
这是我发现的一个错误报告,描述了这种行为(显然,这只是@extend
的工作方式):