gistfile1.md

Include

@include is used for mixins. Find the mixin, and copy that css into the class that is including it.

SCSS

 @mixin red {
    color: red;
 }
 
 .roster-text {
    @include red;
 }
 
 .button-text {
   @include red;
 }

Compiled output

 .roster-text {
    color: red;
 }
 
 .button-text {
 	color: red;
 }

Extend Using Classes

Similar to mixins, but used for extending pre-existing classes. It can intelligently recognize two classes extending the same styles, and concatenate them together in the compiled output.

SCSS

 .red {
 	color: red;
 }
 
 .roster-text {
 	@extend .red;
 }
 
 .button-text {
 	@extend .red;
 }

Compiled output

.red {
	color: red;
}

.roster-text, .button-text {
	@extend .red;
}

Extend Using Placeholders

New hotness in Sass 3.2 . Similar to above, except instead of needing a pre-existing class, placeholders (represented with %) are not compiled into the final output. So you get the benefit of the intelligent concatenation in the compiled output like the original @extend method, but the "class" you're extending from does not need to exist or be compiled, like with an @include)

SCSS

%red {
	color: red;
}

.roster-text {
	@extend %red;
}

.button-text {
	@extend %red;
}

Compiled output

.roster-text, .button-text {
	color: red;
}