Skip to content

Instantly share code, notes, and snippets.

@blackfalcon
Created May 18, 2012 05:32
Show Gist options
  • Save blackfalcon/2723354 to your computer and use it in GitHub Desktop.
Save blackfalcon/2723354 to your computer and use it in GitHub Desktop.
That BOOM moment where we discovered the real power of @extend
// 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;
}
/* 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;
}
// 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;
}
/* 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! */
// 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;
}
/* 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment