@each loop

Question

@each loop için bir eleman indeksi elde edip edemeyeceğinizi merak ediyorum.

Aşağıdaki kodlarım var ancak $i değişkeninin bunu yapmanın en iyi yolu olup olmadığını merak ediyorum.

Güncel kodu: Herşeyden

$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

Öncelikle @each fonksiyon Pusula dan ama Sass uzak değildir.

---

, bu her döngü ile yapılamaz sorunuza gelince, ancak bunu yapabilirsiniz, hangi bir @for döngüye bu dönüştürmek kolaydır:

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

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

Answer 2

bu cevabı güncellemek için: evet @each döngü ile bunu başarabilirsiniz:

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

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

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

Answer 3

Bazen bir dizi veya harita kullanmanız gerekebilir.

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

Ben sadece bir nesneye dönüştürmek için en kolay olduğu bulundu

:

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

Ve kullanmak $i almak için aşağıdaki:

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

Ben diziler içeren bir dizi, yani vardı

Sass ekibi, bir hayranı olmamasına rağmen aşağıdakileri de tavsiye etti:

[...] Yukarıdaki kod, bunu nasıl ele almak istiyorum. Aralık ($ n) gibi bir Sass fonksiyonu ekleyerek daha verimli hale getirilebilir. Yani bu aralık (10) => (1, 2, 3, 4, 5, 6, 7, 8, 9, 10). Ardından olabilir numaralandırmak:

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

link.