mixin e placeholder selector

Olá Dante, tudo bem?

Apesar de serem bem semelhantes, ambos possuem algumas particularidades que causam impacto em nosso projeto, explicarei a seguir!

Vantagens e diferenças

- 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.

Quando devo usar qual?

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!