css – Sass扩展和父选择器

我有以下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