Hace unos 4 proyectos atrás, me enfrenté al dilema de crear y recorrer un array de elementos -en este caso colores en hexacromía- y crear clases CSS dinámicamente a partir de cada uno de los colores contenidos en el arreglo. Algo sencillo de lograr en JavaScript pero que curiosamente tiene diferentes soluciones por cada tipo de [pre-processor][1]. Mientras SCSS y Stylus son más sencillos, con LESS es necesario un poco más de código para lograr lo mismo, pero que se espera se solucione en una pronta versión.

A continuación, snippets de cómo recorrer arreglos y usar sus elementos en LESS, SCSS y Stylus:

LESS⌗ 


// Creamos un arreglo con 4 colores:
@colores: '#767676','#8cc079','#b35d5d','#81babd';
// Guardamos el total de elementos del arreglo:
@cuantos: length(@colores);
// Recorramos cada uno de los elementos del arreglo @colores:
.loop (@index) when (@index > 0){
  // Obtengamos el nombre de cada color
  @color: e(extract(@colores,@index));
  // Ahora podemos utilizarlo:
  elemento-@{index} {
    color: @color;
  }
  .loop (@index - 1);
}
.loop(0){}
// Seguimos recorriendo hasta llegar al total (último):
.loop(@cuantos);
// Fin

SCSS⌗ 


// Creamos un arreglo con 4 colores:
$colores: (#767676, #8cc079, #b35d5d, #81babd);
// Recorramos cada uno de los elementos del arreglo @colores:
@each $color in $colores {
  // Obtengamos el índice de cada $color en $colores:
  $i: index($colores, $color);
  // Ahora podemos utilizarlo:
  elemento-#{$i} {
    color: $color;
  }
}
// Fin

Stylus⌗ 


// Creamos un arreglo con 4 colores:
colores = ( #767676 #8cc079 #b35d5d #81babd )
// Guardamos el total de elementos del arreglo:
cuantos = length(colores) - 1
// Recorramos cada uno de los elementos del arreglo @colores hasta llegar al total (último):
for i in (0..cuantos)
// Ahora podemos utilizarlo:
  elemento-{i + 1}
    color colores[i]
// Fin

[1]: http://www.csslab.cl/etiqueta/pre-procesadores/ “Enlace en CSSLab.cl a “Tag: Pre-Procesadores””