KittyGiraudel / ama

Ask me anything!
43 stars 4 forks source link

Can you loop through multiple Sass Maps at once? #44

Closed maxx1128 closed 9 years ago

maxx1128 commented 9 years ago

One thing I've been curious about for a while since reading your (excellent) SitePoint article on Sass maps is: if you can loop through all the keys and values to generate CSS for one sass map, can you make a loop that goes through multiple Sass maps?

One way I found that's close to this is looping through multiple Sass lists, which is here: http://benfrain.com/working-with-lists-and-each-loops-in-sass-with-the-index-and-nth-function/

But I still prefer Sass maps for their sense of structure and focus, and am curious if there'd be a way to loop through several at once in a similar fashion.

KittyGiraudel commented 9 years ago

Hey.

To iterate on several maps at once, you can use a @for loop that starts at 1 and ends at the length of the largest map you want to loop through. Then you access the current pair in a loop using the nth(..) function. When used on a map, it returns a list of 2 values: the first value is the key, the second is the value.

Here is a quick example: http://sassmeister.com/gist/7000682fd7f102a80231. :)