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:

@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:

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

Resultado da compilação:

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

@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:

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

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

.li-1 {
	width: 1px; 
}

.li-2 {
	width: 2px; 
}

.li-3 {
	width: 3px; 
}

.li-4 {
	width: 4px; 
}

Conte qual será o resultado da compilação do seguinte código:

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

Conte qual será o resultado da compilação do seguinte código:

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