@chaque boucle avec index

Je me demandais si vous pouvez obtenir un index de l'élément pour le @de chaque boucle.

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

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;
    }   
}
InformationsquelleAutor ignacioricci | 2013-02-28
  1. 92

    Tout d'abord, la @each fonction n'est pas de Boussole, mais à partir de Sass.

    Pour répondre à votre question, cela ne peut être fait avec un de chaque boucle, mais il est facile de le convertir en un @pour boucle, qui peut le faire:

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

    //... do something fancy with $c
}
    • Doux. Merci 😀
    • à mon humble avis, lors de l'utilisation de each, sass auteurs devraient avoir créé automatiquement un $idx variable qui sera utilisée comme index. c'est si utile.
    InformationsquelleAutor Wouter J
  2. 52

    De mettre à jour cette réponse: oui, vous pouvez réaliser avec les @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/

    • Malheureusement, cette approche rompt si $couleurs-liste contient 2 valeurs identiques (par ex. #111, #222, #111, #333). Dans ce cas-index($couleurs-liste, #111) retournera toujours 1, de sorte que votre $i les valeurs de sortir comme 1, 2, 1, 4. Dommage parce que sinon c'est un très soignée approche 🙂
    • C'est aussi 1-indexé au lieu de la commune 0-index
    InformationsquelleAutor Jimmerz28
  3. 13

    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 convertir un objet:

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

    Et utilisez la commande suivante pour obtenir $i:

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

    Le sass équipe a également recommandé à la suite, même si je ne suis pas un grand fan:

    [...] Le code ci-dessus est comment j'aimerais aborder cette question. Il peut être rendue plus efficace par l'ajout d'un Sass fonction comme la gamme($n). De sorte que la portée(10) => (1, 2, 3, 4, 5, 6, 7, 8, 9, 10). Puis énumérer peut devenir:

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

    lien.

    InformationsquelleAutor nikk wong