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