Diretiva @for no SASS

Com a diretiva @for é possível gerar estilos específicos em uma quantidade indicada por uma variável contadora. A primeira variante de escrita do @for é a seguinte:

scss@for $var from (início) through (fim)

Neste caso, o intervalo inclui estritamente os valores (início) e (fim). Vale a pena notar que (início) e (fim) devem retornar números inteiros, pois eles definem a direção da contagem, ou seja, se (início) for menor que (fim), o contador aumentará e, correspondentemente, se for o contrário - diminuirá.

Vamos examinar o funcionamento da diretiva @for na primeira variante de sintaxe com o seguinte exemplo:

styles.scss@for $count from 1 through 5 {
  .li-#{$count} {
    width: $count + px;
  }
}

Resultado da compilação:

styles.css.li-1 {
  width: 1px; 
}
.li-2 {
  width: 2px; 
}
.li-3 {
  width: 3px; 
}
.li-4 {
  width: 4px; 
}
.li-5 {
  width: 5px; 
}

Na segunda variante, a escrita é a seguinte:

scss@for $var from (início) to (fim)

Neste caso, o valor (fim) é excluído.

Vamos pegar o exemplo anterior e escrevê-lo na segunda variante:

styles.scss@for $count from 1 to 5 {
  .li-#{$count} {
    width: $count + px;
  }
}

Agora preste atenção no código resultante:

styles.css.li-1 {
  width: 1px; 
}

.li-2 {
  width: 2px; 
}

.li-3 {
  width: 3px; 
}

.li-4 {
  width: 4px; 
}

styles.scss@for $var from 5 through 1 {
  li-#{$var} {
    padding: 10 * $var + px;
  }
}

styles.scss@for $var from 1 to 3 {
  .navbar-link-#{$var} {
    color: blue;
    width: 10px * $var;
  }
}