Pelo que entendi ambos cumprem com a mesma função. Quando devo usar qual?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Pelo que entendi ambos cumprem com a mesma função. Quando devo usar qual?
Olá Dante, tudo bem?
Apesar de serem bem semelhantes, ambos possuem algumas particularidades que causam impacto em nosso projeto, explicarei a seguir!
- mixin @include
A primeira e grande diferença é que ao contrário do placeholder, o mixin aceita receber parâmetros dentro de sua sintaxe. Dessa forma, em um projeto que existem muitas variáveis, torna-se mais necessário o uso do mixin.
- placeholder @extend
O segundo ponto, é que na compilação de scss para css, o placeholder sai na frente! Isso ocorre porque o mixin apenas aplica as propriedades nos elementos de forma mais individual e o placeholder consolida o código que está sendo compartilhado entre elementos, evitando a repetição no código. Veja o exemplo:
Imagine que temos quatro elementos <div>, onde no arquivo SCSS dois utilizam mixin (.mixin1 e .mixin2) e dois utilizam placeholder (.placeholder1 .placeholder2) e algumas propriedades em comum foram aplicadas.
- arquivo SCSS
// declaração do mixin e placeholder
@mixin mixin-test {
background-color: blue;
width: 300px;
height: 400px;
}
%extend-test {
background-color: yellow;
width: 300px;
height: 400px;
}
//aplicação do mixin e placeholder
.mixin1 {
@include mixin-test;
}
.mixin2 {
@include mixin-test;
boder: 2px black solid;
position: absolute;
right: 0;
top: 0;
}
.placeholder1 {
@extend %extend-test;
}
.placeholder2 {
@extend %extend-test;
boder: 2px black solid;
position: absolute;
right: 0;
top: 0;
}- arquivo CSS
Agora, vamos ver o resultado após a compilação!
.mixin1 {
background-color: blue;
width: 300px;
height: 400px;
}
.mixin2 {
background-color: blue;
width: 300px;
height: 400px;
boder: 2px black solid;
position: absolute;
right: 0;
top: 0;
}
.placeholder1 .placeholder2 {
background-color: yellow;
width: 300px;
height: 400px;
}
.placeholder2 {
boder: 2px black solid;
position: absolute;
right: 0;
top: 0;
}Note que apenas o placeholder conseguiu identificar propriedades iguais que estavam sendo aplicadas em dois elementos, evitando a existência de código duplicado.
A prioridade na construção do projeto é sempre é evitar o duplicamento desnecessário de código, então recomenda-se utilizar o máximo possível o placeholder. Entretanto, como somente o mixin aceita parâmetros, podemos deixá-lo restrito para contextos que utilizam variáveis.
Espero ter ajudado, em caso de dúvida fique a vontade para perguntar. Bons estudos!