为啥 SASS 在使用扩展时会修改同名的链式选择器？

Posted 2023-03-06

【中文标题】为啥 SASS 在使用扩展时会修改同名的链式选择器？

【英文标题】：Why does SASS modify chained selectors of the same name when using extend?为什么 SASS 在使用扩展时会修改同名的链式选择器？

【发布时间】：2019-03-28 17:23:23

【问题描述】：

给定以下 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：

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

【问题讨论】：

我认为 SASS 是在推理类名为“a”以及类名“a”的元素与类名为“a”的元素相同。

@connexo 不，它们不相同，一个比另一个更具体

@connexo 但他们不是！ .a.a 具有更高的特异性！将 OP 的 SCSS 更改为 .a color: red; &.a color: blue; 并查看颜色变化！

@connexo 这绝对是零意义：这就是特定性始终起作用的方式（***.com/questions/2809024/points-in-css-specificity），这是我们可以用来覆盖某些外部样式的东西，例如做.a:not(#random_ID) [我们在不更改规则的情况下使用 ID 增加特异性]

@connexo 问题不存在。不管是不是不好的方法，编译器都不应该改变用户定义的特殊性。优化不应影响行为。

【参考方案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;