Sass Extend and Placeholder Selector Example

sassextend.css

// =========================
// Example 1: using a @mixin
// =========================

// SCSS:

    @mixin a_pink_box() {
    	float: left;
    	display: block;
    	color: pink;
    	width: 100px;
    	height: 100px;
    }

    .valentinecard {
    	@include a_pink_box;
    }

    .other_pink_thing {
    	@include a_pink_box;
    	font-size: 2em;
    }

=>
 
// CSS:

    .valentinecard {float: left; display: block; color: pink; width: 100px; height: 100px}
    .other_pink_thing {float: left; display: block; color: pink; font-size: 2em; width: 100px; height: 100px}

// Outcome? Unnecessary duplication

// ========================
// Example 2: using @extend
// ========================

// SCSS:

    .a_pink_box {
    	float: left;
    	display: block;
    	color: pink;
    }

    .valentinecard {
    	@extend .a_pink_box;
    }

    .other_pink_thing {
    	@extend .a_pink_box;
    	font-size: 2em;
    }
    
=>

// CSS:

    .a_pink_box, .valentinecard, .other_pink_thing {float: left; display: block; color: pink; width: 100px; height: 100px}
    .other_pink_thing {font-size: 2em}

// Outcome? Better, but we don't need the class a_pink_box.' !


// ========================
// Example 3: using @extend and Placeholder Selectors
// ========================

// SCSS:

    %a_pink_box { //<-------- % replaced .
    	float: left;
    	display: block;
    	color: pink;
    }

    .valentinecard {
    	@extend %a_pink_box;
    }

    .other_pink_thing {
    	@extend %a_pink_box;
    	font-size: 2em;
    }
    
=>

// CSS:

    .valentinecard, .other_pink_thing {float: left; display: block; color: pink; width: 100px; height: 100px}
    .other_pink_thing {font-size: 2em}

// No duplication!