Sass的extend和父选择器

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; }

我不明白为什么输出顺序与指定的顺序不同。我该如何更改它？

- TimPetricola

---

如果选择器是有效的，那么它的顺序是否重要呢？ - cimmanon

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 的工作方式）：

• placeholder-selectors decide on the actual selector's order, not the actual selectors

- André Dion

---

谢谢，但输出完全相同。 - TimPetricola