为什么SASS在使用Extend时要修改同名的链接选择器？

Question

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

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

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

.a {
  color: blue;
}

.a {
  color: red;
}

我觉得这很违反直觉！

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

以防万一您不相信我，这里有一个codepen演示（单击查看编译的css查看css输出）

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

所以在下面的SASS中：

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

输出为：

.a {
  color: blue;
}

.a.a {
  position: relative;
}

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

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