Criando class dinâmicas com SCSS.

클래스 디나미카

오 문제

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 class 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 cala, somos uma civilização avançada e temos frameworks que entregam muitas e muitas classes com muitas alternativas. O 부트스트랩 및 Vuetify que citei antes são bons example. 8px aí에서 8px aí와 함께 사용할 수 있는 옵션이 없습니다gap.

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

솔루션

Para começar, vamos precisar adicionar no nosso arquivo .scss algo que percorra uma lista de números e gere algo a partir dela. 간단하게, 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:

나는 = 1
클래스 이름 = .flex-gap-1
간격 = 4px

Nesse caso, teremos nossas 16 class em apenas algumas linhas de código. Flex-gap-0 클래스에 대해 자세히 살펴보려면 필요한 경우 필요한 갭 제거 장치를 제거해야 합니다.

사용자 정의 클래스를 사용하기 위한 장소입니다! Você pode ver um exemplo funcionalaqui .

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