@each loop với chỉ số

Question

Tôi đã tự hỏi nếu bạn có thể nhận được một chỉ số phần tử cho vòng lặp @each.

Tôi có mã sau đây, nhưng tôi đã tự hỏi nếu biến số $i là cách tốt nhất để làm điều này.

đang hiện tạ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; 
    } 
} 

Answer 1

Trước hết, các @each chức năng không phải là từ Compass, nhưng từ Sass.

---

Để trả lời câu hỏi của bạn, điều này không thể được thực hiện với một mỗi vòng lặp, nhưng nó rất dễ dàng để chuyển đổi này vào một vòng lặp @for, có thể làm điều này:

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

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

Answer 2

Để cập nhật câu trả lời này: có bạn có thể đạt được điều này với @each loop:

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

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

Nguồn: http://12devs.co.uk/articles/handy-advanced-sass/

Answer 3

Đôi khi bạn có thể cần phải sử dụng một mảng hoặc một bản đồ. Tôi đã có một mảng của mảng, ví dụ:

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

tôi thấy rằng đó là dễ dàng nhất để chỉ chuyển nó sang một đối tượng:

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

Và sử dụng sau đây để có được $i:

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

Nhóm sass cũng đề xuất những điều sau đây, mặc dù tôi không có nhiều người hâm mộ:

[...] Đoạn mã trên là cách tôi muốn giải quyết vấn đề này. Nó có thể được thực hiện hiệu quả hơn bằng cách thêm một hàm Sass như phạm vi ($ n). Vì vậy phạm vi đó (10) => (1, 2, 3, 4, 5, 6, 7, 8, 9, 10). Sau đó, liệt kê có thể trở thành:

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

link.