为什么使用扩展时SASS会修改相同名称的链接选择器？

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（单击查看编译的CSS以查看CSS输出）

注意：

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

因此在以下SASS中：

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

输出为：

.a {
  color: blue;
}

.a.a {
  position: relative;
}

（Codepen demo）

---

¹ 请参见the spec：

  

注意：允许重复出现同一简单选择器，并且   确实增加了特异性。

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