« HE:labs
HE:labs

Mastering Sass - Mixin vs Extend

Postado por Thiago Gonzalez em 03/09/2014

Essa é a primeira parte de uma série de posts sobre Sass e como tirar o máximo proveito dele. Vamos começar esta série buscando entender o que é e como utilizar Mixins e Extends, suas diferenças e as melhores situações para aplicar cada um.

Sass é um pré-processador de CSS que possui diversas funções que ajudam a reutilizar seu código e a escrevê-lo de forma organizada, mas muitas pessoas não utilizam nem 10% de todos recursos disponíveis.

Mixin

Quando você utiliza Mixins, seu código é repetido toda vez que o mixin é chamado. É uma boa prática para quem quer utilizar parâmetros que mudam conforme suas chamadas, por exemplo:

1 @mixin container-style($value: 10px, $background: #fff) {
2   & {
3     background: $background;
4     padding: $value;
5   }
6 }
7 
8 .one { @include container-style($value: 20px, $background: #000) }
9 .two { @include container-style }

Veja como é o output deste código, depois de gerado:

1 .one {
2   background: #000;
3   padding: 20px;
4 }
5 
6 .two {
7   background: #fff;
8   padding: 10px;
9 }

O código é gerado de acordo com os parâmetros que foram passados no Mixin, então, como os valores que vão ser gerados não são sempre os mesmos, a utilização de Mixin é recomendada. Podemos utilizar Mixins sem parâmetros também, mas o código será repetido, exatamente como ele é, em todo local que ele for chamado. Veja:

1 @mixin container-style {
2   & {
3     background: #fff;
4     padding: 10px;
5   }
6 }
7 
8 .one { @include container-style }
9 .two { @include container-style }

Veja como é o output deste código, depois de gerado:

1 .one {
2   background: #fff;
3   padding: 10px;
4 }
5 
6 .two {
7   background: #fff;
8   padding: 10px;
9 }

Não existem contra indicações para se usar Mixins. Você pode utilizar dentro ou fora de media queries, declarando fora e chamando dentro, ou vice-versa.

Extend

Quando você utiliza Extend, seu código não é repetido, ele é declarado onde você solicitar, reutilizando as regras escritas. Veja o mesmo exemplo dado no Mixin, mas utilizando Extend:

1 %container-style {
2   & {
3     background: #fff;
4     padding: 10px;
5   }
6 }
7 
8 .one { @extend %container-style }
9 .two { @extend %container-style }

Veja como é o output deste código, depois de gerado:

1 .one, .two {
2   background: #fff;
3   padding: 10px;
4 }

Veja uma outra forma de se utilizar Extend:

1 .container {
2   background: #fff;
3   padding: 10px;
4 
5   h3 { font-size: 2em } 
6 }
7 
8 .one { @extend .container }
9 .two { @extend .container }

Veja como é o output deste código, depois de gerado:

1 .container, .one, .two {
2   background: #fff;
3   padding: 10px;
4 }
5 
6 .container h3, .one h3, .two h3 { font-size: 2em }

Como você pode ver, existe um padrão de estilo dentro de .container, onde .one e .two também utilizam. Um lado negativo na utilização do Extend é que não podemos estender um estilo que esteja fora da media query para alguém dentro dela, ou vice-versa.

Como você utiliza seus Extends e Mixins? Qual você prefere? Utiliza os dois ou "viciou" apenas em um? Deixe seu comentário :)

Compartilhe

Sabia que nosso blog agora está no Medium? Confira Aqui!