improve @extend + placeholder selectors if it’s used just once

[maxhoffmann]

It would be great if Sass could check if a placeholder class is extended just once and if that’s the case work like @include instead of @extend.

%alert { // layout
  width: 300px;
  height: 50px;
}

.alert { // default theme
  @extend %alert;
  background-color: gray;
}

This currently compiles to:

.alert {
  width: 300px;
  height: 50px;
}

.alert {
  background-color: gray;
}

It would be great if it compiles to:

.alert {
  width: 300px;
  height: 50px;
  background-color: gray;
}

This would improve the output if one uses OOCSS or SMACSS, as one can put layout rules into a placeholder class and theme rules into a “real” class without adding unnecessary code when there is just one theme. If there is more than one theme it works as expected.

[robwierzbowski]

If we take a look at the testing that came out of the nested media query debate it shows that micro optimizations like these don't have much of an effect, on rendering time or gzipped page weight. And that was with whole @media declarations.

As a kid who used to optimize animated gifs by hand I feel your pain, but I believe this is a case where adding complexity to Sass's code won't have any real benefits.

[maxhoffmann]

Good point. If this optimization adds too much complexity to Sass’s code it shouldn’t be fixed.

[chriseppstein]

We plan to implement an optimizer at some point. When we do, this is an example of a obvious optimization that would be performed whether or not the output was generated via the use of placeholders/extend.

[nex3]

What @chriseppstein said. Also worth noting that we couldn't just do this universally because it could unpredictably re-order the source code.

#116 is broadly tracking our optimization efforts.