дерзость @each цикл с несколькими списками

Question

развивающихся в

СКС

У меня есть два списки переменных:

$ids: 21, 33, 73; 
$colors: #fff, #000, #333; 

и следующий цикл @each.

@each $id, $color in ($ids, $colors) { 
    .category--#{$id}, 
    .post--#{$id} { 
     color: #{$color}; 
    } 
} 

Я хочу, чтобы отобразить следующую

.category--21, 
.post--21 { 
    color: #fff 
} 

.category--33, 
.post--33 { 
    color: #000 
} 

.category--73, 
.post--73 { 
    color: #333 
} 

Но я получаю это вместо

.category--21, 
.post--21 { 
    color: 33; 
} 

.category--#fff, 
.post--#fff { 
    color: #000; 
} 

Неуверенный в моей структуре. Очевидно, что у меня намного больше списков переменных (просто добавлено 3 к каждому для демонстрационных целей).

Любая конструктивная обратная связь приветствуется. Спасибо

Answer 1

Основываясь на моем понимании, я думаю, что @each не подходит для вас, так как у вас нет пары ключей и значений в качестве одного элемента. Ниже то, что documentation says about @each: (курсив мой)

директива @each может также использовать несколько переменных, как в @each $ var1, $ var2, ... в < списке>. Если < list> - список списков, каждый элемент подписок назначается соответствующей переменной.

Как видно из приведенного выше заявления, в вашем случае $ids будет рассматриваться как один из списка и $colors будет рассматриваться как другой. Это означает, что

• первой итерации $id является 21, $color является 33 и 73 не назначен
• второй итерации $id является #fff, $color является #000 и #333 не назначен.

---

Это может быть лучше для вас, чтобы использовать петлю @for, как в приведенном ниже фрагменте кода:

$ids: 21, 33, 73; 
$colors: #fff, #000, #333; 

@for $i from 1 through length($ids) { 
    $id: nth($ids, $i); 
    $color: nth($colors, $i); 
    .category--#{$id}, 
    .post--#{$id} { 
     color: #{$color}; 
    } 
} 

Answer 2

Привет вы злоупотребить его: D @each является итерация список списком смотрите ниже

$pair: (21, #fff), (33, #000), (73, #333); 

@each $id, $color in $pair { 
    .category-#{$id}, 
    .post-#{$id} { 
     color: #{$color}; 
     height: 20px; 
    } 
} 

ссылка док: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#each-multi-assign