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?
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.
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:
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.
extend
efunction
é amplo de mais. Já a relaçãomixin
vsextend
é mais próxima. Por exemplo,function
eextend
possuem uma distinção bem clara, o que não é o caso de ummixin
e umextend
.