@extend vs @mixin

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}

// 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:

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

// No duplication!

Thank you! I was wondering about this.

Though line 58 should be:

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

Thanks very much! Cleared up my understanding of the difference between the two. Before this I really couldn't figure out what made them any different at all!

Seriously, thank you. It's surprisingly difficult to fine a simple, concise explanation of things like this.

To clarify the posts here, I've forked this gist and added some further information.
https://gist.github.com/cmndo/641589d08e94405b6be4

https://csswizardry.com/2016/02/mixins-better-for-performance/