css - 为什么 SASS 在使用 extend 时会修改同名的链式选择器？

Question

给定以下 HTML/SASS 代码:

<div class="a">hello</div>

%color {
    color: blue;
}
.a {
  color: red;
}
.a.a {
  @extend %color;
}

我期望生成的颜色是蓝色(由于更具体的 .a.a 选择器¹)，输出如下:

.a.a {
   color: blue;
}
.a {
   color: red;
}

但实际上，结果颜色是红色，带有 SASS 输出:

.a {
  color: blue;
}

.a {
  color: red;
}

我觉得这很违反直觉!

为什么 SASS 将我的 .a.a 选择器重构为 .a？

以防万一你不相信我，这是a codepen demo (点击view compiled css查看CSS输出)

注意:

选择器的这种“重构”只发生在扩展中的声明。

所以在下面的 SASS 中:

%color {
    color: blue;
}
.a.a {
  @extend %color;
  position: relative;
}

输出是:

.a {
  color: blue;
}

.a.a {
  position: relative;
}

( Codepen demo )

---

¹参见the spec :

Note: Repeated occurrences of the same simple selector are allowed and do increase specificity.

Answer 1

从表面上看，结果取决于解析引擎。如果您使用 DartSass v1.6.2(sassmeister.com 上的默认设置)，它会输出您的预期结果:

.a.a {
  color: blue;
}

.a {
  color: red;
}

查看sassmeister.com (您也可以在那里切换解析引擎)。

LibSass v3.5.2 创建了您提示的结果:

.a {
  color: blue;
}

.a {
  color: red;
}