Add the index iteration variable to @each

[lolmaus]

Whenever i do:

@for $i from 1 through length($colors)
  $color: nth($colors, $i)
  .column:nth-child(#{$i})
    background-color: $color

i feel like a kitten dies somewhere in misery and loneliness. And i find myself doing that in almost any project, so that's quite a lot of kittens. :(

I wish i could do this instead:

@each $color, $index in $colors
  .column:nth-child(#{$index})
    background-color: $color

Please spare the kittens. It's our war, not theirs.

[KittyGiraudel]

Would be nice, indeed.

[nex3]

The suggested syntax steps on the toes of the map/pair iteration in 3.3, so that's not workable.

I'm not entirely opposed to this if a very elegant syntax can be devised, but I'm skeptical of that. The syntax needs to be easy to understand when reading the code for someone with only passing familiarity with Sass, and easy to remember when writing Sass. It should also not give users the impression that constructs like @each can have a million different configurations that do different things. I think this is a tall order, but you're welcome to try.

In the meantime, I don't think it's too burdensome to use a @for loop here. Many languages more powerful than Sass make do with that.

[Snugug]

@nex3 what about something like the following:

@each $color in $colors with index $i

[lolmaus]

Or something like

@each $color as $index in $colors

[nex3]

@each $color in $colors with index $i

This is okay, although it relies on users knowing the term "index". I'm also not a big fan of requiring two words; I think that contributes to the "word salad" feeling about @each.

@each $color as $index in $colors

as isn't descriptive enough.

[Snugug]

IMO requiring people to know what "index" means when dealing with iterators is OK, but maybe "counter" would work too (although I bet most people who would use this feature would prefer "index")

How about something like this:

@each $color in $colors, index $i (or w/o the ,)

• or -

@each $color in $colors, counter $i

[nex3]

IMO requiring people to know what "index" means when dealing with iterators is OK, but maybe "counter" would work too (although I bet most people who would use this feature would prefer "index")

It's fine to require knowledge for people who are writing the code, but a major part of the weight of a new syntax construct is the added difficulty of reading the code, especially for inexperienced users or users who aren't well-versed in programming. Manually tracking a counter may be slightly more work when writing the loop in the first place, but it's easy for even an inexperienced reader to figure out what's going on when reading it.

Many widely-used languages have no more concise way of doing this than Sass does right now, and they do just fine. This is why I'm being so stringent in my requirements for this syntax: I think it adds relatively little value and expressiveness, so it needs to be extremely comprehensible to all users in order to mitigate its added weight.

[Snugug]

Yah, I understand that's a concern. I agree that it's entirely possible for this functionality to be done in round-about ways currently and that many languages don't have an each with iterator, so it should be OK for Sass.

I think the key distinction, though, between Sass and other languages in terms of an each with iterator is the medium in which we're working. In Sass, because we're outputting to CSS, there is a need for both strings and numbers coming from an each, especially CSS's nth. Frameworks in Sass often rely upon lots of lists (and now maps), and those often need indexes when looping. I'm sure, of course, you understand all of this, so I'm not going to continue.

Instead, let's discuss syntax. What are your current objections to counter $i or index $i?

[Snugug]

One place where I think this can make it much easier to work is an each with key/value. Take the following (which is what we need to do now):

$zoo: (
  "salamander": (
    background: green,
    border-color: red
  ),
  "chicken": (
    background: yellow,
    border-color: red
  ),
  "elephant": (
    background: purple,
    border-color: blue
  )
);

$zoo-length: length($zoo);

@for $i from 1 through $zoo-length {
  $animal: nth($zoo, $i);
  $name: nth($animal, 1);
  $properties: nth($animal, 2);
  li:nth-of-type(#{$i}) {
    content: $name;
    @each $key, $value in $properties {
      #{$key}: $value;
    }
  }
}

This could be rewritten in the following way (which IMO is much more legible). While a user may not know what an index is immediately, what the code is trying to do is fairly easy to comprehend (much more so than the original)

$zoo: (
  "salamander": (
    background: green,
    border-color: red
  ),
  "chicken": (
    background: yellow,
    border-color: red
  ),
  "elephant": (
    background: purple,
    border-color: blue
  )
);

@each $animal, $properties in $zoo, counter $i {
  li:nth-of-type(#{$i}) {
    content: $name;
    @each $property, feature in $properties {
      #{$key}: $value;
    }
  }
}

[lolmaus]

I got curious how Python folk resolve this issue, as Python doesn't boast to be syntactically sweet as well as Sass.

It turned out, they use an enumerate helper function for this which does a simple job: turns an array into a dictionary.

So i made a similar function for Sass.

Usage:

$list: (dog, cat, bird, cow)

@each $index, $value in enumerate($list)
  li:nth-child( #{ length($list) }n + #{ $index } ):before
    content: quote($value)

Source:

@function enumerate($list)
  $map: ()

  @for $index from 1 through  length($list)
    $value: nth($list, $index)
    $map: map-merge($map, ($index: $value))

  @return $map

Seems to be working fine and handy to use.

Demo: http://sassmeister.com/gist/8346425

It doesn't cover @Snugug's nifty use case though.

[chriseppstein]

The above code is how I'd like to address this. It can be made more efficient by adding a Sass function like range($n). So that range(10) => (1, 2, 3, 4, 5, 6, 7, 8, 9, 10). Then enumerate can become:

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