%color {
color: blue;
}
<strong i="6">@mixin</strong> getOverridedSelector {
&#{&} {
@content;
}
}
.foo {
<strong i="7">@include</strong> getOverridedSelector {
<strong i="8">@extend</strong> %color;
}
}
.bar {
<strong i="9">@include</strong> getOverridedSelector {
color: red;
}
}
libsass 3.6.0
Ruby Sass 3.7.4
sowie auf Codepen (wahrscheinlich libsass)
.foo {
color: blue;
}
.bar.bar {
color: red;
}
Dart-Sass 1.22.6-1 (Archlinux AUR)
.foo.foo {
color: blue;
}
.bar.bar {
color: red;
}
Quelle, die dieses Problem gefunden hat: https://stackoverflow.com/questions/57376896
@nex3 ist das beabsichtigt oder eine Regression in Dart-Sass?
Frühere Versionen von ruby sass hatten die gleiche Ausgabe wie libsass.
Dart Sass hat hier recht. Das Verhalten von Ruby Sass und LibSass verletzt das zweite Gesetz von Extend , das besagt, dass die Spezifität des generierten Selektors ( .foo
, Spezifität 10) größer oder gleich der Spezifität des Extenders ( .foo.foo
, Spezifität 20).
Dies scheint auf dem neuesten Master behoben worden zu sein.
Hilfreichster Kommentar
Dart Sass hat hier recht. Das Verhalten von Ruby Sass und LibSass verletzt das zweite Gesetz von Extend , das besagt, dass die Spezifität des generierten Selektors (
.foo
, Spezifität 10) größer oder gleich der Spezifität des Extenders (.foo.foo
, Spezifität 20).