22Looping 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.