As funcionaliades dos dois são praticamene as mesmas. São construídos com propriedades e valores, para que assim possam repetí-los dentro da compilação utilizando menos linhas.
O mixin, nos dá a oportunidade de usar valores que podem ser variados, diferente do placeholder. Essa é a vantagem do mixin.
A desvantagem do mixin, é justamente a vantagem do placeholder, que é, compactar códigos. O mixin encurta nosso código SCSS, mas matém os valores quando compilado no CSS. E o placeholder veio justamente pra isso, compactar esse código, juntado elementos/classes/id's que tem as MESMAS propriedades E valores.
VISÃO TÉCNICA
1. Criação Mixin: Para criar um mixin, é preciso chamá-lo através do código @mixin
, dar um nome à ele, e, colocar suas propriedades e valores entre chaves:
@mixin nome-mixin{
position: absolute;
color: #000;
}
1.1. Mixin + valores: Como já comentado sobre as vantagens do mixin, é possível alterar valores dentro dele, mas para isso, criamos eles antes através de variáveis:
@mixin nome-mixin($cor:#000, $posi:absolute){
position: $posi;
color: $cor;
}
1.3. Chamando mixin: Para chamar o mixin dentro de algum elemento/classe/id, usa-se o @include
depois o nome do mixin criado.
1.4. E se quisermos mudar seu valor?: Numa div
por exemplo, usaremos @include nome-mixin(relative, #fff);
Mas se quiséssemos deixar eles com os valores já existentes no mixin, ou seja, padrão, seria @include nome-mixin();
2. Criação placeholder: Aqui, a criação é um pouco diferente, mas simples. Para você criar o placeholder, terá que usar apenas o símbolo de porcentagem (%) junto ao nome do seu placeholder. E após, as propriedades e valores:
%nome-placeholder{
position: absolute;
color: #000;
}
2.1. Chamar placeholder: E por fim, para chamar o placeholder dentro de algum elemento/classe/id, usa-se o @extend
, depois o nome do placeholder criado, (ou qualquer classe CSS) acompanhhado com (%): @extend %nome-placeholder;
Minha vantagem, é sua desvantagem.
A frase acima explica um pouco a ideia de diferenciação desses dois caras, e nos fornece um alerta, pois nenhum dos dois é melhor que o outro, logo, "irei chamá-los" em casos que específicos de cada um.