List generates wrong values

[dbzrzezinski]

Hi, if i create a list, and iterate through i get (maybe cached) index values.

$listItems: (150px 150px);

.navbar {
  @each $itemWidth in $listItems {
    $index: index($listItems, $itemWidth);
    .navbar-item:nth-child(#{$index}) {
      width: $itemWidth;
    }
  }
}

The index is alway the same. even if i add some more values to the list and then add a value with 150px it also generates the nth-child(1).

.navbar .navbar-item:nth-child(1) {
  width: 150px;
}
.navbar .navbar-item:nth-child(1) { // should be 2
  width: 150px;
}

If i change the value, it works like expected $listItems: (100px 150px 151px);

.navbar .navbar-item:nth-child(1) {
  width: 150px;
}
.navbar .navbar-item:nth-child(2) {
  width: 151px;
}

Here the Gist from sassmeister.com https://gist.github.com/dbzrzezinski/c33fa3405c0834d8a3e665e38fbce6fc

This is just an example ;)

[saper]

I'd say works as expected - https://sass-lang.com/documentation/modules/list#index says

If $value appears multiple times in $list, this returns the index of its first appearance.

You might want to use @for instead.