Sass For Loop

A Sass For Loop. The links are created with JavaScript/JSON. A colour fade effect is created with the lighten function and multiplication operator in SCSS.

The Sass loops through the six links (@for $i from 1 through 6) with class “links1” “links2” “links3″… each time lightening the link colour incrementally by 7%.

 

 

 

 

This example is a Sass For Loop created with plain ol’ HTML & Sass (SCSS).  A colour fade effect is created with the lighten function and multiplication operator in SCSS.

The Sass loops through the six links (@for $i from 1 through 6) with class “links1” “links2” “links3″… each time lightening the link colour incrementally by 7%.

 

 

 

Sass Functions – Official Documentation