1
resposta

Mixin VS Placeholder

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

1 resposta

Fala ai Sanmir, tudo bem? Obrigado pela explicação, foi muito boa.

Abraços e bons estudos.