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

Question

假设我想从 SASS 生成下面的 CSS selecor

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

飞镖实际结果：

 .test.test{
      color: red;
 }

lib-sass 实际结果：

 .test{
      color: red;
 }

Answer 1

这

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

忽略以下内容，因为 OP 正在请求明显导致错误的@extend。

只需使用飞镖即可。

---

@mixin getOverridedSelector {
  &#{&} {
    @content;
  }
}
.foo {
  @include getOverridedSelector {
    color: red;
  }
}

这对我来说效果很好。为什么你首先有那条&&线？

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