Articles
Introdução ao SASS/SCSS
Iteração no SASS

Iteração no SASS

Este artigo explica como lidar com iteração no SASS.

Vamos explicar como realizar iteração no SASS passo a passo, usando exemplos de código reais.

YouTube Video

Iteração no SASS

A iteração no SASS ajuda a evitar duplicação de código e permite criar estilos flexíveis e reutilizáveis.

Razões para usar iteração no SASS

Existem várias vantagens em usar iteração, como as seguintes:.

  • Reutilização do código melhora, facilitando a geração de estilos com padrões semelhantes.
  • Manutenção é facilitada, tornando mais fácil alterar vários estilos de uma só vez.
  • Também reduz erros.

Por exemplo, você pode gerar estilos para botões com cores diferentes ou componentes com vários tamanhos de uma só vez.

Sintaxe usada para iteração no SASS

A principal sintaxe usada para iteração no SASS é a seguinte:.

  • Usando @for, você pode realizar a iteração sobre um intervalo especificado de números.
  • Usando @each, você pode iterar sobre listas ou mapas.
  • Com @while, você pode iterar até que uma determinada condição seja atendida.

Iteração usando @for

@for executa um processamento repetitivo com base em um intervalo especificado de números.

Sintaxe 

1/*
2@for $i from <start> to <end> {
3  ...
4}
5
6@for $i from <start> through <end> {
7  ...
8}
9*/
  • Especifique os valores inicial e final para <start> e <end>. Usar to exclui o valor final, enquanto through o inclui.

Exemplo

O código a seguir gera automaticamente classes com larguras de borda aumentando em 1px cada.

1@for $i from 1 through 5 {
2  .border-#{$i} {
3    border-width: #{$i}px;
4  }
5}
  • Este código gera automaticamente classes para bordas com espessura aumentando 1px a cada vez. A diretiva @for é usada aqui para iterar de 1 até 5.

CSS Gerado 

 1.border-1 {
 2  border-width: 1px;
 3}
 4.border-2 {
 5  border-width: 2px;
 6}
 7.border-3 {
 8  border-width: 3px;
 9}
10.border-4 {
11  border-width: 4px;
12}
13.border-5 {
14  border-width: 5px;
15}
  • Classes de .border-1 até .border-5 serão geradas sequencialmente, com cada borda aumentando em 1px de espessura.

Iteração usando @each

@each executa loops usando listas ou mapas. É útil quando você deseja gerar classes padronizadas de forma eficiente.

Sintaxe 

1/*
2@each $item in <list> {
3  ...
4}
5*/

Exemplo 1: Usando uma Lista

O código a seguir gera várias classes de cor de texto.

1@each $color in ("red", "blue", "green") {
2  .text-#{$color} {
3    color: #{$color};
4  }
5}
  • Este código gera automaticamente classes de cor de texto para cada cor na lista. A diretiva @each é usada para processar cada valor da lista sequencialmente.

CSS Gerado 

1.text-red {
2  color: red;
3}
4.text-blue {
5  color: blue;
6}
7.text-green {
8  color: green;
9}
  • Quando o arquivo SASS é compilado para CSS, classes como .text-red, .text-blue e .text-green são geradas para cada cor da lista.

Exemplo 2: Usando um Mapa

Usando um mapa, você pode lidar com pares de chave e valor. No exemplo a seguir, as cores de fundo dos botões são definidas usando um mapa.

 1$colors: (
 2  primary: #3498db,
 3  success: #2ecc71,
 4  danger: #e74c3c
 5);
 6
 7@each $name, $hex in $colors {
 8  .bg-#{$name} {
 9    background-color: #{$hex};
10  }
11}

CSS Gerado 

1.bg-primary {
2  background-color: #3498db;
3}
4.bg-success {
5  background-color: #2ecc71;
6}
7.bg-danger {
8  background-color: #e74c3c;
9}
  • Quando o arquivo SASS é compilado para CSS, classes como .bg-primary, .bg-success e .bg-danger são geradas para cada chave do mapa.

Iteração usando @while

@while continua o loop enquanto a condição for verdadeira.

Sintaxe 

1/*
2@while <condition> {
3  ...
4}
5*/

Exemplo

Por exemplo, se você quiser aumentar o tamanho da fonte passo a passo, pode escrever assim:.

1$i: 1;
2
3@while $i <= 5 {
4  .font-#{$i} {
5    font-size: #{$i}rem;
6  }
7  $i: $i + 1;
8}
  • Você pode usar a diretiva @while para processar iterativamente o aumento do tamanho da fonte em etapas. Usando a variável $i, as classes são geradas automaticamente para valores de 1 a 5.

CSS Gerado 

 1.font-1 {
 2  font-size: 1rem;
 3}
 4.font-2 {
 5  font-size: 2rem;
 6}
 7.font-3 {
 8  font-size: 3rem;
 9}
10.font-4 {
11  font-size: 4rem;
12}
13.font-5 {
14  font-size: 5rem;
15}
  • Quando o arquivo SASS é compilado para CSS, classes com tamanhos de fonte de 1rem a 5rem são geradas automaticamente.

Exemplo Avançado: Combinando Iteração e Aninhamento

Combinando iteração com o recurso de aninhamento do SASS permite gerar estilos ainda mais avançados.

Exemplo

Abaixo está um exemplo onde as cores de fundo e hover dos botões são definidas juntas.

 1@use "sass:color";
 2
 3$colors: (
 4  primary: #3498db,
 5  success: #2ecc71,
 6  danger: #e74c3c
 7);
 8
 9@each $name, $hex in $colors {
10  .btn-#{$name} {
11    background-color: $hex;
12    color: white;
13
14    &:hover {
15      background-color: color.scale($hex, $lightness: -10%);
16    }
17  }
18}
  • Ao combinar iteração e aninhamento do SASS, você pode gerar as cores de fundo dos botões e as cores de hover de uma só vez. Para cada cor no mapa, uma classe .btn- é criada e o estilo :hover é definido usando aninhamento.

CSS Gerado 

 1.btn-primary {
 2  background-color: #3498db;
 3  color: white;
 4}
 5.btn-primary:hover {
 6  background-color: #2980b9;
 7}
 8.btn-success {
 9  background-color: #2ecc71;
10  color: white;
11}
12.btn-success:hover {
13  background-color: #27ae60;
14}
15.btn-danger {
16  background-color: #e74c3c;
17  color: white;
18}
19.btn-danger:hover {
20  background-color: #c0392b;
21}
  • Quando você converte o arquivo SASS para CSS, a cor de fundo e a cor de hover de cada botão são geradas automaticamente, e os estilos :hover são definidos coletivamente usando aninhamento.

Pontos Importantes ao Usar Iteração

Considere os seguintes pontos ao usar iteração para escrever um código mais eficiente e legível.

  1. Evite aninhamento excessivamente profundo Aninhamento excessivo reduz a legibilidade, por isso mantenha ao mínimo necessário.

  2. Considere impactos de desempenho Se muitas classes forem geradas pela iteração, seu CSS pode ficar desnecessariamente grande.

  3. Use nomes de variáveis apropriados Para variáveis como $i ou $item, utilize nomes significativos para que seu código seja mais fácil de entender.

Resumo

Utilizar iteração no SASS permite um design de estilos eficiente e de fácil manutenção. Em especial, escolher entre @for, @each e @while permite gerar CSS dinâmico e flexível.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

A função `if` no SASS