web-dev-qa-db-fra.com

@chaque boucle avec index

Je me demandais si vous pouviez obtenir un index d'élément pour la boucle @each.

J'ai le code suivant, mais je me demandais si le $i variable était la meilleure façon de procéder.

Code actuel:

$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;
    }   
}
sasseach
59
ignacioricci

Tout d'abord, le @each la fonction n'est pas de Compass, mais de Sass.

Pour répondre à votre question, cela ne peut pas être fait avec une boucle each, mais il est facile de le convertir en @for boucle, ce qui peut faire ceci:

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

    // ... do something fancy with $c
}
93
Wouter J

Pour mettre à jour cette réponse: oui, vous pouvez y parvenir avec le @each boucle:

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

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

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

54
Jimmerz28

Parfois, vous devrez peut-être utiliser un tableau ou une carte. J'avais un tableau de tableaux, c'est-à-dire:

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

J'ai trouvé qu'il était plus facile de simplement le convertir en objet:

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

Et utilisez ce qui suit pour obtenir $i:

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

L'équipe sass a également recommandé ce qui suit, même si je ne suis pas très fan:

[...] Le code ci-dessus est la façon dont je voudrais résoudre ce problème. Il peut être rendu plus efficace en ajoutant une fonction Sass comme range ($ n). Donc, cette plage (10) => (1, 2, 3, 4, 5, 6, 7, 8, 9, 10). L'énumération peut alors devenir:

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

lien.

14
nikk wong