인덱스가있는 @each 루프

인덱스가있는 @each 루프

---

@each 루프에 대한 요소 인덱스를 얻을 수 있는지 궁금합니다.

다음 코드가 있지만 $i변수가이 작업을 수행하는 가장 좋은 방법 인지 궁금합니다 .

현재 코드 :

$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;
    }   
}

---

우선이 @each기능은 Compass가 아니라 Sass에서 가져온 것입니다.

---

귀하의 질문에 답하기 위해 이것은 각 루프로 수행 할 수 없지만 이것을 루프로 변환하는 것은 쉽습니다 @for.

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

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

---

이 답변을 업데이트하려면 예 @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;
    }
}

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

---

때로는 배열이나 맵을 사용해야 할 수도 있습니다. 배열의 배열이 있습니다.

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

객체로 변환하는 것이 가장 쉽다는 것을 알았습니다.

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

다음을 사용하여 얻으십시오 $i.

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

sass 팀은 또한 다음을 권장했지만 나는 그다지 팬이 아닙니다.

[...] 위의 코드는이 문제를 해결하고 싶습니다. range ($ n)와 같은 Sass 함수를 추가하여 더 효율적으로 만들 수 있습니다. 그래서 범위 (10) => (1, 2, 3, 4, 5, 6, 7, 8, 9, 10). 그런 다음 열거는 다음과 같이 될 수 있습니다.

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

링크.

참고 URL : https://stackoverflow.com/questions/15146706/each-loop-with-index