@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!

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