css - 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