Vejo muitas pessoas usando o Sass @mixin de maneiras que tornam o código realmente ruim e repetitivo quando compilado em CSS. Não tenha medo, Sass tem uma solução!

O Sass @extend permite que você, como o nome indica, deixe os seletores herdarem o código de outros seletores. Isso compila de maneira mais agradável do que usar @mixin para o mesmo propósito, e você ainda mantém a capacidade de manutenção do código.

Com @mixin

Sass

@mixin button {
    width: 50px; height: 50px;
    margin: 10px;
    padding: 10px; }

.button {
    @include button;
    color: black;
    border: 1px solid black; }

.button-red {
    @include button;
    color: red;
    border: 1px solid red; }

.button-blue {
    @include button;
    color: blue;
    border: 1px solid blue; }

Código compilado

.button {
    width: 50px; height: 50px;
    margin: 10px;
    padding: 10px;
    color: black;
    border: 1px solid black; }

.button-red {
    width: 50px; height: 50px;
    margin: 10px;
    padding: 10px;
    color: red;
    border: 1px solid red; }

.button-blue {
    width: 50px; height: 50px;
    margin: 10px;
    padding: 10px;
    color: blue;
    border: 1px solid blue; }

Com @extend

Sass

.button {
    width: 50px; height: 50px;
    margin: 10px;
    padding: 10px;
    color: black;
    border: 1px solid black; }

.button-red {
    @extend .button;
    color: red;
    border: 1px solid red; }

.button-blue {
    @extend .button;
    color: blue;
    border: 1px solid blue; }

Código compilado

.button, .button-red, .button-blue {
    width: 50px; height: 50px;
    margin: 10px;
    padding: 10px;
    color: black;
    border: 1px solid black; }

.button-red {
    color: red;
    border: 1px solid red; }

.button-blue {
    color: blue;
    border: 1px solid blue; }

A saída que obtemos usando @extend segue o princípio DRY, deixando uma pegada muito menor no CSS compilado. Usar apenas @mixin poderia facilmente deixar seu CSS em uma bagunça, mesmo que o Sass tenha uma boa aparência.

Você também pode usar @extend para tornar o HTML mais legível:

ao invés de

.link {
    width: 50px; height: 20px;
    padding: 3px;
    color: black;
    display: block; }

.link-red {
    color: red; }

<div class="link"></div>
<div class="link link-red"></div>
<div class="link"></div>

Você poderia fazer

.link {
    width: 50px; height: 20px;
    padding: 3px;
    color: black;
    display: block; }

.link-red {
    @extend .link;
    color: red; }

<div class="link"></div>
<div class="link-red"></div>
<div class="link"></div>

Ao herdar estilos, aperte @mixin, use @extend!

Fonte: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend