Click here to navigate the course.

Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Code Editor
Web Browser
Functions and Operations

For Loops

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.