| 25 | Looping Through Maps |
You can loop through maps in much the same way you loop through lists. You can use the @each function to go through a map. When looping through maps, much like lists, Sass starts at the beginning of the declaration—so order matters.
When using @each with maps, you have to pass in two variables—the key and the value. Here, there’s a map that consists of a series of widths of a hero image. These will make the hero image more responsive.
When looping through the $hero-widths, you must create variables for the key (in this case, $size) and the value (in this case, $width). You can then use these variables as necessary. In this case, there’s a series of classes that dictate the width of the hero image.
Another handy way ...
Get Pragmatic Guide to Sass 3 now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
