S CSS: Как объединить @for с @each?

Question

HTML

<div class="row">
  <div class="col">first</div>
  <div class="col">second</div>
  <div class="col">third</div>
</div>

S CSS

$statistics: ("first", "second", "third");

:root {
  --first: red;
  --second: blue;
  --third: green;
}

.row {
  @for $i from 1 through length($statistics) {
    @each $variable in $statistics {
      .col:nth-child(#{$i}) {
        color: var(--#{$variable});
      }
    }
  }
}

я хочу скомпилировать его как

.row {
  .col:nth-child(1) {
    color: var(--first);
  }
  .col:nth-child(2) {
    color: var(--second);
  }
  .col:nth-child(3) {
    color: var(--third);
  }
}

Где я не прав? Каждый .col имеет все 3 цвета. Я хочу, чтобы у каждой статистики c был только один цвет в статистике $. Первый .col имел первое, второй .col , второй et c ...

EDIT что если переменные определены как это?

$statistics: (
  "header": ("first", "second", "third")
);

Answer 1

Проблема в том, что у вас сначала l oop с @for, перебирающим все значения $statistics, а затем @each, делающими то же самое, что приводит к повторным значениям. Это должно быть сделано с одним l oop. Я могу придумать два способа достижения того, что вы хотите:

.row {
  @for $i from 1 through length($statistics) {
    $variable: nth($statistics, $i);

    .col:nth-child(#{$i}) {
        color: var(--#{$variable});
      }
  }
}

или

.row {
 @each $variable in $statistics {
     $i: index($statistics, $variable);
      .col:nth-child(#{$i}) {
        color: var(--#{$variable});
      }
  }
}

В случае переменной, определенной как:

$statistics: (
  "header": ("first", "second", "third")
);

Вы можно использовать map-get для получения переменных. Примерно так:

$header: map-get($statistics, "header");

@each $variable in $header {
    $i: index($header, $variable);

    .col:nth-child(#{$i}) {
      color: var(--#{$variable});
    }
}

Это то же самое, что и раньше, но цикл с $header вместо $statistics