Como Fazer Um Laço De Repetição Com SCSS

Alguma vez você já precisou criar um sistema de grid em seu CSS mas não queria ficar repetindo manualmente as classes de forma ineficiente? Ou por algum outro motivo, você pensa o quão bom seria fazer um laço de repetição dentro do seu arquivo SCSS e descobre que com o Sass possibilita fazer isso! Mas como?

Laço de Repetição @for

$i: 0;
@for $i from 1 through 4 {
  .classe-#{$i} {
    width: 60px + $i;
  }
}

Quando compilado, o resultado será o seguinte:

.classe-1 {
  width: 61px;
}
.classe-2 {
  width: 62px;
}
.classe-3 {
  width: 63px;
}
.classe-4 {
  width: 64px;
}

Laço de Repetição @while

$i: 0;
@while $i <= 4 {
  .classe-#{$i} {
    width: 60px + $i;
  }
  $i: $i + 5;
}

O resultado será exatamente igual ao exemplo superior!

Conclusão

Podemos utilizar esses laços de repetições quando precisamos criar classes que de alguma forma, serão iguais, ou terão um padrão de repetição, como é feito em um sistema de grids, como o do bootstrap!