@cada bucle con índice

Me preguntaba si puedes obtener un índice de elemento para el bucle @each.

Tengo el siguiente código, pero me preguntaba si la variable $i era la mejor manera de hacer esto.

Código actual: 

$i: 0;
$refcolors: #55A46A, #9BD385, #D9EA79, #E4EE77, #F2E975, #F2D368, #F0AB55, #ED7943, #EA4E38, #E80D19;

@each $c in $refcolors {
    $i: $i + 1;
    #cr-#{$i} strong {
        background:$c;
    }   
}
 54
eachsass
Author: Wouter J, 2013-03-01
Source

3 answers

En primer lugar, la función @each no es de Compass, sino de Sass.

Para responder a su pregunta, esto no se puede hacer con un bucle cada, pero es fácil convertirlo en un @for loop, que puede hacer esto: 

@for $i from 1 through length($refcolors) {
    $c: nth($refcolors, $i);

    // ... do something fancy with $c
}
 82
Author: Wouter J,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-02 11:53:33

Para actualizar esta respuesta: sí puedes lograr esto con el bucle @each: 

$colors-list: #111 #222 #333 #444 #555;

@each $current-color in $colors-list {
    $i: index($colors-list, $current-color);
    .stuff-#{$i} { 
        color: $current-color;
    }
}

Fuente: http://12devs.co.uk/articles/handy-advanced-sass/

 48
Author: Jimmerz28,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-06-16 12:31:01

A veces es posible que necesite usar una matriz o un mapa. Tenía un arreglo de arreglos, es decir: 

$list = (('sub1item1', 'sub1item2'), ('sub2item1', 'sub2item2'));

Descubrí que era más fácil convertirlo en un objeto:

$list: (
    'name': 'thao',
    'age': 25,
    'gender': 'f'
);

Y usa lo siguiente para obtener $i: 

@each $property, $value in $list {
    $i: index(($list), ($property $value));

El equipo de sass también recomendó lo siguiente, aunque no soy muy fan:

[...] El código anterior es cómo me gustaría abordar esto. Se puede hacer más eficiente añadiendo una función Sass como range (n n). Así que ese rango(10) => (1, 2, 3, 4, 5, 6, 7, 8, 9, 10). Entonces enumerar puede convertirse en: 

@function enumerate($list-or-map) {
    @return zip($list-or-map, range(length($list-or-map));
}

Link.

 8
Author: nikk wong,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-06 15:49:43