@każda pętla z indeksem

Question

@każda pętla z indeksem

Zastanawiałem się, czy możesz uzyskać indeks elementu dla @każdej pętli.

Mam następujący kod, ale zastanawiałem się, czy zmienna $i jest najlepszym sposobem, aby to zrobić.

Obecny kod:

$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

each sass

Author: Wouter J, 2013-03-01

Source

3 answers

Aby zaktualizować tę odpowiedź: Tak możesz to osiągnąć za pomocą pętli @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;
    }
}

Źródło: 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/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-16 12:31:01

Czasami może być konieczne użycie tablicy lub mapy. Miałem tablicę tablic, tzn.:

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

Stwierdziłem, że najłatwiej jest przekonwertować go na obiekt:

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

I użyj poniższego, aby uzyskać $i:

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

Zespół sass polecił również następujące, chociaż nie jestem fanem: {]}

[...] Powyższy kod jest tym, czym chciałbym się zająć. Można ją zwiększyć poprzez dodanie funkcji Sass, takiej jak range ($n). Więc ten zakres(10) => (1, 2, 3, 4, 5, 6, 7, 8, 9, 10). Wtedy wyliczenie może stać się:

@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/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-06 15:49:43

score 82 · Accepted Answer

Po pierwsze, funkcja @each nie jest z kompasu, ale z Sass.

Aby odpowiedzieć na twoje pytanie, nie można tego zrobić za pomocą każdej pętli, ale łatwo jest przekształcić to w @for pętla, która może to zrobić:

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

    // ... do something fancy with $c
}