Code Editor
main.css
Web Browser
Learn

For loops in Sass can be used to style numerous elements or assigning properties all at once. They work like any for-loop you've seen before.

Sass's for loop syntax is as follows:

@for $i from $begin through $end { //some rules and or conditions }

In the example above:

  1. $i is just a variable for the index, or position of the element in the list
  2. $begin and $end are placeholders for the start and end points of the loop.
  3. The keywords through and to are interchangeable in Sass

For-loops are useful for many things, but in the following exercises we will be using them to style a block of rainbow divs!

Report a Bug
If you see a bug or any other issue with this page, please report it here.