Learn
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:
$i
is just a variable for the index, or position of the element in the list$begin
and$end
are placeholders for the start and end points of the loop.- The keywords
through
andto
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!
Instructions
1.
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.
2.
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.