For Loop in Sass (SCSS)

A Sass For Loop. The links are created with JavaScript/JSON. A colour fade effect is used 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%.

 

 

 

 

A Sass For Loop. The tiles are created with HTML & CSS. A colour fade effect is used with the lighten function and multiplication operator in SCSS.

The @extend creates a tile with a background-color:($root-color) “blue” and tile width ($tile-width) set to 5% & 150px height ($tile-height). Flexbox is used. The Sass (SCSS) loops through the twenty tiles (with class “tile1” ..“tile10”.. “tile20…etc..) each time lightening the tile colour (blue) by a multiplication of 2%.  The colour is lightened by 2%, 4%, 6%, 8%, 10% progressively each increment up to 20 times.

In this case the tile & tile class are written in HTML and no JS is used. Without the (SCSS) class increment .tile#{$i} it would not be able to apply the background-color: lighten($root-color, $i*2) effect to the tile HTML class. The HTML class name needs to match the appropriate Sass (SCSS) class.

A similar logic normally used to create a for loop in JS is done here with SCSS. Notice if you change the browser size or view this on a mobile device the beauty of Flexbox, everything is contained and scales….

 

 

 

Sass Functions – Official Documentation