Sass扩展和父选择器

Question

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

我不明白为什么输出顺序与指定的顺序不一样.我怎么能改变呢？

Answer 1

我认为你所追求的是以下内容：

%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工作原理）：