Skip to Content
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!



In main.scss, insert the following for-loop:

@for $i from 1 through $total { .ray:nth-child(#{$i}) { background: blue; } }

Click “Run” to see the changes in the browser and inspect the output in main.css.


Inside of the body of the for-loop, dance through the colorwheel by using the color function we saw before and modifying the background:

background: adjust-hue(blue, $i * $step);

Click “Run” to see your changes in the browser and inspect them in the output of main.css.

Folder Icon

Sign up to start coding

Already have an account?