Criando classes dinâmicas com SCSS.

Classes dinâmicas

O problema

Para começar, vou te sugerir um problema. Você está criando um arquivo de estilos padrão, nele você quer ter classes básicas para acelerar o desenvolvimento. Se fosse fazer isso da forma mais simples (e trabalhosa) as classes personalizadas de um margin-left ficariam mais ou menos assim:

.ml-1{
  margin-left: 4px;
}
.ml-2{
  margin-left: 8px;
}
.ml-3{
  margin-left: 12px;
}

(Note que para cada número estou adicionando 4px. Esse é o padrão de spacing do vuetify, ferramenta que uso atualmente e que motivou esse artigo.)

Nesse caso, além de escrever muitas classes (até onde iria? ml-16?) ainda criaríamos um problema, e se um dia por exemplo eu precisar mudar meu padrão de 4px para 2px? Sim, precisaríamos alterar todas as classes!!!

Mas calma, somos uma civilização avançada e temos frameworks que entregam muitas e muitas classes com muitas alternativas. O Bootstrap e o Vuetify que citei antes são bons exemplos. Porém nem todos os casos estão cobertos, no vuetify por exemplo não tenho a opção de usar o gap dinamicamente, olha uma tentativa de gap com 8px aí:

<div class="gap-2">
 ...
</div>

Como o vuetify não me entrega isso nativamente então terei que criar, sendo assim vamos botar a mão na massa.

A solução

Para começar, vamos precisar adicionar no nosso arquivo .scss algo que percorra uma lista de números e gere algo a partir dela. Simplificando, vamos fazer um for.

@for $i from 0 through 16 {
  ...
}

E agora precisamos definir nossa classe, vou chamar ela de flex-gap mas fique a vontade para definir outro nome.

@for $i from 0 through 16 {
  .flex-gap-#{$i} {
    gap: #{$i * 4}px;
  }
}

Lembra da regra dos 4px? ela está sendo aplicada ali no nosso loop, por exemplo, na posição 1 do nosso loop teremos:

i = 1
nome da classe = .flex-gap-1
gap = 4px

Nesse caso, teremos nossas 16 classes em apenas algumas linhas de código. Sem contar que teremos a classe flex-gap-0, você poderia usá-la para remover o gap de algum elemento caso necessário.

Agora é só usar sua classe customizada! Você pode ver um exemplo funcional aqui.

Se isso te ajudou deixa um comentário aí e fique a vontade pra me dar um oi no Linkedin