SASS e Compass – Diferenças entre mixins @include e @extends

0
70 views

logo-sass

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.

Check out this Pen!

A saída desse código seria:

Check out this Pen!

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:

Check out this Pen!

O resultado desse código seria:

Check out this Pen!

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:

Check out this Pen!

Resultando em:

Check out this Pen!

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

Check out this Pen!

Compilando o código temos o seguinte resultado:

Check out this Pen!

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.