4

Tanto o @mixin como o @extend parecem ter o mesmo objetivo:

Adicionar um bloco de código padrão para uma classe.

Mas se possuem essa mesma finalidade, qual a diferença entre eles? E quando devo utilizar um ou outro?

2

1 Resposta 1

10

A utilização de @mixin e @extend pode parecer semelhante e ter a mesma finalidade, apesar de isso ser verdade, elas possuem propósitos diferentes bem como seus prós e contras. Ambas, se utilizadas de modo errado, podem se tornar uma baita dor de cabeça.

No começo a gente pode tender a utilizar um ou outro aos montes devido a praticidade que eles nos dão para escrever SASS. Com um @mixin ou @extend você pode resumir inúmeras linhas de códigos. Mas é ai que mora o perigo..

Muitas vezes o que escrevemos em SASS parece perfeitamente prático e perfeito, tudo parece em ordem, mantendo o princípio de DRY, mas tudo vai embora quando olhamos nosso código compilado para CSS.

Por exemplo, o código a seguir pode parecer perfeito em SASS:

@mixin placeHolder {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.classe1 {
    @include placeholder;
}
.classe2 {
    @include placeholder;
}
.classe3 {
    @include placeholder;
}
.classe4 {
    @include placeholder;
}
.classe5 {
    @include placeholder;
}

Mas o CSS gerado seria este:

.classe1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.classe2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.classe3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.classe4 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.classe5 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

Todo o princípio DRY, manutenção de código e simplicidade que em SASS parecia perfeita, foi por água abaixo...

Mas é aí que entra o @extend para a salvação! Veja a mesma lógica com a utilização de @extend:

%placeHolder {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.classe1 {
    @extend %placeHolder;
}
.classe2 {
    @extend %placeHolder;
}
.classe3 {
    @extend %placeHolder;
}
.classe4 {
    @extend %placeHolder;
}
.classe5 {
    @extend %placeHolder;
}

Gerando o seguinte código:

.classe1,
.classe2,
.classe3,
.classe4,
.classe5 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

Perfeito, agora nós conseguimos manter o código simples, limpo, em poucas linhas de código.

MAS.....

Apesar de isso ser verdade, é uma verdade parcial. A utilização de @extend quando feita de modo abusivo pode quebrar todo o princípio básico de seu uso e gerar muitas classes com poucas propriedades, tornando seu código final extremamente bagunçado, com repetição de classes, voltando a estaca zero.

Mas então qual devo usar? E quando devo usar?

Um macete básico que gosto de lembrar é o seguinte:

  • Mixin: Utilize para gerar seu código de modo dinâmico através de variáveis;
  • Extend: Utilize para elementos comuns mas que haverá pouca repetição;

Por exemplo, vamos supor que você possua um botão com o mesmo estilo porém com alguns estados de cores. Você poderia fazer da seguinte maneira:

@mixin corBotao($cor, $corHover) {
    border: 1px solid $cor;
    color: $cor;
    &:hover {
        background: $cor;
        color: $corHover;
    }
}
.button--azul {
    @include corBotao(blue, white);
    background: transparent;
    width: 64px;
    height: 48px;
    cursor: pointer;
    text-align: center;
}

Deste modo você irá gerar o seguinte código:

.button--azul {
    background: transparent;
    width: 64px;
    height: 48px;
    cursor: pointer;
    text-align: center;
    /* Gerado pelo mixin */
    border: 1px solid blue;
    color: blue;
    &:hover {
        background: blue;
        color: white;
    }
}

Com isso você pode gerar diversos botões com cores diferentes sem precisar definir manualmente qual cor cada botão terá.

Para exemplificar o uso do @mixin, pode partir do mesmo exemplo anterior e melhorar nosso código. As propriedades de width, height, etc.. São comuns em todos os botões, seja ele azul, vermelho, verde, etc.. Então apenas essas propriedades podemos converter para o uso do @extend:

@mixin corBotao($cor, $corHover) {
    border: 1px solid $cor;
    color: $cor;
    &:hover {
        background: $cor;
        color: $corHover;
    }
}
%padraoBotao {
    background: transparent;
    width: 64px;
    height: 48px;
    cursor: pointer;
    text-align: center;
}

.button--azul {
    @include corBotao(blue, white);
    @extend %padraoBotao;
}
.button--verde {
    @include corBotao(green, white);
    @extend %padraoBotao;
}
.button--vermelho {
    @include corBotao(red, white);
    @extend %padraoBotao;
}

O exemplo acima irá gerar o seguinte código final:

.button--azul,
.button--verde,
.button--vermelho {
    background: transparent;
    width: 64px;
    height: 48px;
    cursor: pointer;
    text-align: center;
}
.botao--azul {
    border: 1px solid blue;
    color: blue;
    &:hover {
        background: blue;
        color: white;
    }
}
.botao--verde {
    border: 1px solid green;
    color: green;
    &:hover {
        background: green;
        color: white;
    }
}
.botao--vermelho {
    border: 1px solid red;
    color: red;
    &:hover {
        background: red;
        color: white;
    }
}

Veja como o código final se manteve limpo, organizado, objetivo e mantendo boas práticas.

O que não seria recomendado, seria utilizar o mesmo extend para outro elemento, por mais que ele possua a mesma característica.

Outro exemplo que eu, particularmente, utilizo o @mixin é para códigos pequenos que serão utilizados em algumas classes, por exemplo o uso de display: flex;. Como ainda precisamos dos vendor-prefix, eu não quero escrever todos eles à mão, mas também não quero gerar um agrupamento de classes complemante sem relação, só por partilharem do mesmo display. Para isso eu utilizo um mixin, mas é um uso controlado com um objetivo bem específico.


Como visto nos exemplos, cada um possui um uso bem específico e destinado. Apesar de serem semelhantes DENTRO DO SASS, quando olhamos nosso CSS eles possuem resultados bem distintos que podem piorar seu código final ao invés de melhorar.

Mas, apesar de toda essa diferença, lembre-se que não é uma regra a ser seguida a risca (como eu mesmo a quebro de vez enquando), tudo se trata de um planejamento e organização do seu código.

Para mais guias de boas práticas em CSS e SASS recomendo ver este projeto que estou elaborando no github, ele está em desenvolvimento constante e também aceito contribuições! Aliás, elas são mais do que bem vindas. Mais experiências geram melhores práticas.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .