Libsass: @extend ignores @mixin

Created on 6 Aug 2019 · 3Comments · Source: sass/libsass

input.scss

%color {
  color: blue;
}

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

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

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

Actual results

libsass 3.6.0
Ruby Sass 3.7.4
as well as on codepen (probably libsass)

.foo {
  color: blue;
}

.bar.bar {
  color: red;
}

Expected result

dart sass 1.22.6-1 (Archlinux AUR)

.foo.foo {
  color: blue;
}

.bar.bar {
  color: red;
}

source that found this problem: https://stackoverflow.com/questions/57376896

Bug - Confirmed Dev - Test Written

Source

GottZ

Most helpful comment

Dart Sass is correct here. The Ruby Sass and LibSass behavior violates the second law of extend, which says that the specificity of the generated selector (.foo, specificity 10) should be greater than or equal to the specificity of the extender (.foo.foo, specificity 20).