22 | Looping Through Lists |
There are a few more Sass functions that allow us to interact with lists. The next one you’ll learn about is @each.
@each allows you to loop through every item in a list. At that point, you can choose to do something with that item: for example, use interpolation to create a series of classes.
In the example, you can see a new way of setting up a list: assigning it to a variable. This is totally valid Sass and can definitely keep your mixins and functions clean.
You can loop through a list of colors in order to create a series of classes with appropriate colors assigned to them. Another handy way to use @each is to use a list of filenames to create a series of icon classes with their corresponding paths.
What To Do... ... |
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.