SASS @each over a dictionary without $key

[reesooyt]

Apparently:

I tried deleting the $key variable, but the compiled CSS does not have color1 or color2. In fact, it seems like the syntax is just invalid and the section of code is just discarded.

Could someone explain this behavior?

Challenge:
SASS: Use @each to Map Over Items in a List | freeCodeCamp.org

[lasjorg]

Post the code you tried.

---

A map consists of key/value pairs, @each is meant to have access to both the key and the value, without the key variable the value variable is assigned both the key and value.

The example code compiles to this CSS without the key.

.color1 blue-text {
  color: color1 blue;
}

.color2 red-text {
  color: color2 red;
}

.color3 green-text {
  color: color3 green;
}

You can think of having the key without using it like skipping the first parameter to get to a second parameter in a callback. For example, in a JS forEach loop if you only wanted the index you would still have to add the element parameter.

[1, 2, 3].forEach((_, index) => console.log(index))

You can’t skip the element parameter

[1, 2, 3].forEach((index) => console.log(index)) // index is the element, not the index

---

Sass: @each