Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.4)
// Compass (v1.0.0.alpha.18)
// ----

// Start with a class .foo
.foo {
  line-height: 150%;
  font-size: 2em;
}

// Now @extend it
@mixin green-foo {
  @extend .foo;
  color: green;
}

// Use the mixin somewhere
.xxx .yyy {
  @include green-foo;
}

.www .zzz {
  @include green-foo;
}

.xyz .vwx {
  @include green-foo;
}

/*
So far so good, the compiled CSS still looks reasonable. But if we
now start styling the class .foo, shit happens!
In particular, compiled selectors become much too long, making the
size of the CSS bundle explode.
*/

.abc .def .foo {
  color: red;
}

.some .selector .foo, .or .some .other .selector .foo {
  line-height: 2em;
}

.see .if .i .actually .style .foo .then .pretty .bad .things .happen {
  background: pink;
}

/*
The key takeout is: only @extend stuff that you don't style.
Using %placeholder syntax ensures that you cannot use the placeholder
directly. It is only a "template" to be extended (think of an abstract
class or a Ruby Module: you can only extend it, not instantiate it).
So, our rule could be: only @extend %placeholders, never selectors
*/

SassMeister-output.css

.foo, .xxx .yyy, .www .zzz, .xyz .vwx {
  line-height: 150%;
  font-size: 2em;
}

.xxx .yyy {
  color: green;
}

.www .zzz {
  color: green;
}

.xyz .vwx {
  color: green;
}

/*
So far so good, the compiled CSS still looks reasonable. But if we
now start styling the class .foo, shit happens!
In particular, compiled selectors become much too long, making the
size of the CSS bundle explode.
*/
.abc .def .foo, .abc .def .xxx .yyy, .xxx .abc .def .yyy, .abc .def .www .zzz, .www .abc .def .zzz, .abc .def .xyz .vwx, .xyz .abc .def .vwx {
  color: red;
}

.some .selector .foo, .some .selector .xxx .yyy, .xxx .some .selector .yyy, .some .selector .www .zzz, .www .some .selector .zzz, .some .selector .xyz .vwx, .xyz .some .selector .vwx, .or .some .other .selector .foo, .or .some .other .selector .xxx .yyy, .xxx .or .some .other .selector .yyy, .or .some .other .selector .www .zzz, .www .or .some .other .selector .zzz, .or .some .other .selector .xyz .vwx, .xyz .or .some .other .selector .vwx {
  line-height: 2em;
}

.see .if .i .actually .style .foo .then .pretty .bad .things .happen, .see .if .i .actually .style .xxx .yyy .then .pretty .bad .things .happen, .xxx .see .if .i .actually .style .yyy .then .pretty .bad .things .happen, .see .if .i .actually .style .www .zzz .then .pretty .bad .things .happen, .www .see .if .i .actually .style .zzz .then .pretty .bad .things .happen, .see .if .i .actually .style .xyz .vwx .then .pretty .bad .things .happen, .xyz .see .if .i .actually .style .vwx .then .pretty .bad .things .happen {
  background: pink;
}

/*
The key takeout is: only @extend stuff that you don't style.
Using %placeholder syntax ensures that you cannot use the placeholder
directly. It is only a "template" to be extended (think of an abstract
class or a Ruby Module: you can only extend it, not instantiate it).
So, our rule could be: only @extend %placeholders, never selectors
*/