That BOOM moment where we discovered the real power of @extend

1_example_mixin.scss

// We all know how to use mixins, right?

@mixin kung {
  background: green;
  color: yellow;
}

@mixin foo {
  background: orange;
  color: red;
  font-size: 12px;
}

.foo_one {
  @include foo;
}

.foo_two {
  @include foo;
}

2_example_mixin.css

/* the mixin example will give us this CSS, the land of copy and paste */

.foo_one {
  background: orange;
  color: red;
  font-size: 12px;
}

.foo_two {
  background: orange;
  color: red;
  font-size: 12px;
}

3_example_extend.scss

// Ok, so using mixins to 'copy and paste' css is a bad idea, let's use extends to make this better

.kung {
  background: green;
  color: yellow;
}

.foo {
  background: orange;
  color: red;
  font-size: 12px;
}

.foo_one {
  @extend .foo;
}

.foo_two {
  @extend .foo;
}

4_example_extend.css

/* The extend example gives us something pretty nice, like the following */

.kung {
  background: green;
  color: yellow;
}

.foo, .foo_one, .foo_two {
  background: orange;
  color: red;
  font-size: 12px;
}

/* But ... the classes .kung and .foo will never be used and until you extend a class for actual use */
/* this is just creating unnecessary css bloat. How can we do this better? */
/* And if you say that this is Object Oriented CSS, I will freak the hell out! */

5_example_silent_extends.scss

// A feature in Sass 3.2 (bleeding edge gem for now) is the concept of silent extends as follows
// By replacing the (.) with a (%), this will create a 'silent class' that is not written out to CSS
// until it is 'extended', EPIC!
// Put that in your OOCSS!

%kung {
  background: green;
  color: yellow;
}

%foo {
  background: orange;
  color: red;
  font-size: 12px;
}

.foo_one {
  @extend %foo;
}

.foo_two {
  @extend %foo;
}

6_example_silent_extends.css

/* This is the resulted CSS, what we always wanted to see */
/* Nathan and Chris, we love you! */

.foo_one, .foo_two {
  background: orange;
  color: red;
  font-size: 12px;
}