Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Saqib Ishfaq
13,912 Pointscan some one elaborate this more as i am struggling to get the idea behind it?
@each $theme, $color in $themes {
.icn-#{$theme}{ color: $color; } }
2 Answers
Joris Noltes
33,824 PointsHi Saqib,
The concept is quite simple, but I can understand this might be confusing because of the variable names used.
As shown in the video, the themes map has several lines or items. Each item consists of a key/value (or name/value) pair, for example: 'games': #3cb144. The key is 'games', it's value is #3cb144.
The each directive becomes easier to read if you look at it like this: each $key, $value in $themes.
You can change the $key and $value variables in this line to something that you may find more descriptive. Guil has named his map themes, therefore it would make sense to change $key to $theme, since every item in this map is a theme. And since the value of every $theme is a color, it would make sense to rename $value to $color.
You can then read the each directive as follows: for every item inside the themes map that we're looping through, set the $theme variable to the current item's key, and set the $color variable to the value that belongs to the current key.
Next, in order to create the different classes, the $key/$theme name is appended to the first part of the class selector (.icn-) through interpolation. Meaning the #{$theme} part changes to the name of the current key, for example: 'games', and the complete class selector then becomes .icn-games.
Chirag Mehta
15,332 PointsI was also struggling to follow the logic of Guil's example but your answer has cleared things up. Thanks Joris
Liam Dawson
13,530 PointsThat makes sense, so does the first $variable always correspond to a key in the map and the second $variable always correspond to the value of the key already referred to?
Joris Noltes
33,824 PointsThat's right Liam. This is because a map is a list of key-value pairs. When the each directive iterates over the map, it checks every pair in order, and for every pair, the first variable is assigned to the key because that is the first part of the pair.
If you were to iterate over a list instead of a map, you would be dealing with single values.
map: ( 'key1' : value1, 'key2' : value2 )
list: ( value1, value2, value3 )
Some helpful reading:
Saqib Ishfaq
13,912 PointsSaqib Ishfaq
13,912 Points//Themes
$themes : ( 'ent' : #79ccf5, 'arch': #fd6fa6, 'edu' : #23bbae, 'sim' : #2377bb, 'soc' : #ada3f0, 'games': #3cb144, );