Extends

01_legacy.css

/* standard old skool CSS, the land of copy and paste */ 

#pageContent {width:954px; }    
#pageContent h2 {margin-bottom:6px;font-size:13px;font-family:Arial, Verdana, Helvetica, sans-serif;}
#pageContent h3 {font-size:13px;font-family:Arial, Verdana, Helvetica, sans-serif;}	
#pageContent h4 {font-size:13px;font-family:Arial, Verdana, Helvetica, sans-serif;}		
#pageContent p {margin:0 0 6px;font-size:11px;}

02_mixins.scss

// sure we can use mixins and variables to decrease the level of copy and paste we do in our SASS

// -- variables -- //
$medium_font_size: 13px;
$small_font_size: 11px;
$primary_font_family: #{Arial, Verdana, Helvetica, sans-serif};

// -- mixins -- //
@mixin primary_font_family {
	font-family: $primary_font_family;
}
@mixin medium_font_size {
	font-size: $medium_font_size;
}
@mixin small_font_size {
	font-size: $small_font_size;
}
@mixin standard_header {
	@include medium_font_size;
	@include primary_font_family;
}

// -- styles -- //
/* re-written using variables, mixins and nesting */
/* ---------------------------------------------- */
#pageContent {
	width: 954px;
	h2 {
		margin-bottom: 6px;
		@include standard_header; 
	}
	h3 {
		@include standard_header; 
	}
	h4 {
		@include standard_header; 
	}
	p {
		margin: 0 0 6px;
		@include small_font_size; 
	} 
}

03_mixins.css

/* but when looking at the final output, instead of me copying and pasting, the machine is.  Did we really gain anything? */ 
/* in fact, our CSS output looks exactly like the initial CSS we started with. We are not using our power for good. */

#pageContent { width: 954px; }
#pageContent h2 { margin-bottom: 6px; font-size: 13px; font-family: Arial, Verdana, Helvetica, sans-serif; }
#pageContent h3 { font-size: 13px; font-family: Arial, Verdana, Helvetica, sans-serif; }
#pageContent h4 { font-size: 13px; font-family: Arial, Verdana, Helvetica, sans-serif; }
#pageContent p { margin: 0 0 6px; font-size: 11px; }

04_extends.scss

// Let's try this same code, except replace @include with @extend. But to do this we need to make a class object out of our mixin.

// -- variables -- //
$medium_font_size: 13px;
$small_font_size: 11px;
$primary_font_family: #{Arial, Verdana, Helvetica, sans-serif};

/* and this is how we do this better with extends */
/* ---------------------------------------------- */

// -- oocss -- //
.arial_font_family {
	font-family: $primary_font_family;
}
.medium_font_size {
	font-size: $medium_font_size;
}
.small_font_size {
	font-size: $small_font_size;
}
.standard_header {
	@extend .medium_font_size;
	@extend .arial_font_family;
}

// -- styles -- //
#pageContent {
	width: 954px;
	h2 {
		margin-bottom: 6px;
		@extend .standard_header; 
	}
	h3 {
		@extend .standard_header 
	}
	h4 {
		@extend .standard_header 
	}
	p {
		margin: 0 0 6px;
		@extend .small_font_size; 
	} 
}

// -- we still have the power of being able to read nicely formatted SASS, but we removed all the copy/paste bloat --//

05_extends.css

// This is the AH HA!
// With this final output for the CSS, the OOCSS object you created leads the concatenated list of selectors that are all using the same styles.


.arial_font_family, #pageContent h2, #pageContent h3, #pageContent h4 { font-family: Arial, Verdana, Helvetica, sans-serif; }

.medium_font_size, #pageContent h2, #pageContent h3, #pageContent h4 { font-size: 13px; }

.small_font_size, #pageContent p { font-size: 11px; }

#pageContent { width: 954px; }
#pageContent h2 { margin-bottom: 6px; }
#pageContent p { margin: 0 0 6px; }