Libsass&Dart-sass 对 CSS 选择器的链接给出不同的结果

Question

假设我想从 SASS 生成下面的 CSS 选择器

.btn.btn {}

但我最终得到了与 dart-sass 和 lib-sass

不同的结果

作为前端开发人员，我曾经使用 sass-loader => node-sass => lib-sass

我该如何解决这个问题？

---

 %color {
    color: red;
}

@mixin getOverridedSelector{
    &#{&} {
        @content;
    }
}

.test{
       @include getOverridedSelector{
       @extend %color;
     }
}

---

预期结果：

.test.test{
      color: red;
 }

dart-sass 实际结果：

 .test.test{
      color: red;
 }

lib-sass 实际结果：

 .test{
      color: red;
 }

Answer 1

这似乎是 lib-sass 和 ruby​​-sass 中的一个错误

忽略以下内容，因为 OP 要求 @extend 这显然会导致错误。

只需使用 dart-sass 代替。

---

@mixin getOverridedSelector {
  &#{&} {
    @content;
  }
}

.foo {
  @include getOverridedSelector {
    color: red;
  }
}

这对我来说效果很好。为什么你一开始就有&& 行？

在那里你可以看到它的实际效果：https://codepen.io/GottZ/pen/EqoBmb