我有以下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; }
我不明白为什么输出顺序与指定的顺序不一样.我怎么能改变呢？
解决方法
我想你所追求的是以下内容：
%btn[disabled],%btn.btn--disabled
color: red
.btn-primary
@extend %btn
为了帮助概念化生成的CSS的结构,只需记住％占位符是一个将被@extending选择器替换的标记.
编辑
实际上,这仍然是输出
[disabled].btn-primary,.btn--disabled.btn-primary {
color: red; }
我不希望…从语法上讲,[禁用] .btn-primary与.btn-primary [禁用]相同,但令人讨厌的是源序列没有被尊重.
这是我发现的一个错误报告,描述了这种行为(显然,这只是@extend的工作方式)：
> placeholder-selectors decide on the actual selector’s order,not the actual selectors
