Con este sencillo código podremos crear contenedores para nuestras columnas CSS, también llamados Grids, crearemos tantos como queramos con nuestro bucle que después podremos usar libremente en el resto de nuestro código.
$rep: 12;
@for $i from 1 through $rep {
$wh: 60;
.col-#{ $i }
{ width: $i * $wh }
}
Ahora repasemos el código:
$rep: 12;//Pasamos a la variable rep el número de columnas que queremos crear.
@for $i from 1 through $rep {
//Iniciamos el bucle dándole a $i un valor de 1 y le indicamos que debe repetirse hasta que el valor de $i llegue al de $rep.$wh: 60;//Le damos a $wh el ancho incremental que necesitamos, con lo que la primera columna sería de 60px, la segunda 120, tercera 180 y así sucesivamente.
.col-#{ $i }
{ width: $i * $wh }
}
//Por último, indicamos la línea de impresión que saldrá al interpretar el script pasándole los valores dinámicos de las variables declaradas anteriormente, lo que se interpretaría como ".col-1 { width: 60 }" obviamente, en cada vuelta, ".col-X" se incrementaría en +1 y "width: X" en +60 ya que multiplicamos 60 * $i.
La última llave simplemente cierra el bucle y nuestro código está listo para funcionar.
