css - 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 的工作方式):

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