Recentemente nos meus estudos sobre Sass e Compass surgiu uma dúvida básica, porém importante sobre a diferença entre os instrumentos lógicos do Sass – @mixin e @extend. Cada um deles é utilizado para um caso específico e abaixo segue exemplos de uso para cada um deles.
@mixin
A importação de um mixin funciona basicamente assim, você defini um nome para esse mixin que também pode ser considerado uma função do Sass. O Mixin não é renderizado dentro de arquivos .css, você só consegue utilizá-lo se o importar para dentro de uma classe existente.
A saída desse código seria:
Para tornar nosso mixin mais interessante, vamos defini-lo para aceitar parâmetros, e o mais legal é que podemos definir valores padrões para esses parâmetros. Com valores padrões pré-definidos, quando você chamar o mixin você O código ficaria da seguinte forma:
O resultado desse código seria:
Segue outro exemplo interessante utilizando o mixin para criar uma função que ira gerar o css das famosas bordas arredondadas do Css3, e nessa função vamos fazer com que o valor da borda seja dinâmico, isso é, enviado via parâmetro. Ficaria basicamente assim:
Resultando em:
@extend
Já o @extend é utilizado quando queremos estender uma classe para outra. Seu uso é diferente do mixin, neste as classes não são compiladas para o .css, já no @extend, você estende algo que já existe e é compilável. Para melhor explicar a utilização do @extend análise o código abaixo:
Compilando o código temos o seguinte resultado:
Conclusão:
Com a utilização do @extend você não pode passar parâmetros, pois com o @extend você compartilhar as propriedades de uma classe com outra, já com o mixin você não só compartilhar como também interage com as propriedades utilizando os parâmetros.
Uma dica legal para quem quer testar a saída dos códigos scss é o site SassMeister.