Introdução ao SASS: Quando usar @mixins ou %placeholders

Por

O SASS é uma linguagem que extende o CSS que facilita o dia-a-dia do programador web e é essencial hoje em dia no desenvolvimento front-end .

Ele possuí duas funcionalidades muito legais que evitam que não repitamos o código, elas são o @mixin e %placeholders.

Ambas são muito úteis quando você tem uma série de regras css que se repetem em diversos seletores, porém os meandros das duas são bem diferentes.

Placeholders

Quando eu penso em placeholders a melhor analogia que me vem a mente são macros. (lembra das aulas de C?)

Placeholders são omitidos no CSS compilado, porém podem ser estendidos, isso é muito legal por que permite que você diminua o volume de código do seu scss criando regras reutilizáveis sem que você tenha que colocar mais uma classe no seu markup.

Ou seja, dá para você fazer algo do tipo:

%center {
  display:block;
  margin-left: auto;
  margin-right: auto;
}

E aplicar seu placeholder assim:

.classe {
  @extend %center;
}

No seu dia-a-dia você vai acabar utilizando placeholders na maioria das vezes quando você estiver trabalhando numa biblioteca.

A limitação dos placeholders é que eles não permitem a utilização de variáveis.

@mixins

Mixins também permitem que você reutilize o código sem ter que adicionar classes no seu HTML, quando eu penso nos @mixins, a melhor analogia que me vem a mente são os traits do PHP e de outras linguagens com orientação a objetos.

A principal vantagem de utilizar @mixin é que eles podem receber variáveis.

Ou seja, você pode fazer algo do tipo:

@mixin mixins-sao-demais($radius: 20px) {
  border-radius: $radius;
}

E chamar esse @mixin com esse código:

/* Utilizando o valor padrão para o argumento. */
.classe1 {
  @include mixins-sao-demais;
}

/* Passando um valor próprio como argumento. */
.classe2 {
  @include mixin-sao-demais(10px);
}

Isso te dá muita flexibilidade no dia-a-dia, tanto que é quase impossível você ter um projeto que não utilize alguns mixins.

Mas, Fabiano, qual a diferença entre um @mixin e uma função (@function)?

Antes do SASS ter suporte a funções, era muito comum os desenvolvedores utilizarem @mixin como se fosse uma função, porém eles tem objetivos diferentes. Enquanto mixins podem ter propriedades, funções servem para fazer calculos e retornar um valor.

PS: Muito obrigado ao Moises pelas dicas e inspiração para escrever esse post.