Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Sass Basics!
You have completed Sass Basics!
Preview
While @for loops are incremental and run for a particular number of repetitions, @each loops iterate through collections of data, like lists or maps, and performs an action on each item.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Each loops iterate through
a collections of data like a list or
0:00
a map and performs an action on each item.
0:00
In this video I'll teach
you how to use an each loop
0:02
to automatically generate CSS rules
from a list of teacher names.
0:05
So this is what the final
demo is going to look like.
0:08
Notice, the repeating pattern here,
each selector uses the prefix teacher and
0:12
each rule uses a background image property
that points to a JPG named after a teacher
0:18
for example alena.jpg,
joel.jpg and nick.jpg.
0:23
So you're going to see how each loops
can save us from having to type
0:29
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up