Playing with SCSS loops

Screenshot of tiles
Tiles using flex, loop and one preset colour.

SCSS offers a few control directives that enable us to perform some rather interesting effects.

In this example, I use a simple for loop to change a single colour value and apply that to a series of 25 <div> elements.

 

A basic loop is straight forward:

 @for $i from 1 through 25 {
   
 }

So, if we have a base colour $color-green: #00ff00 we can simply multiply the current iteration $i by an arbitrary value, and perform an SCSS filter (such as darken, lighten) on that value. Bingo:

$color-green: #00ff00;
$increment: 1.5;

.my-class {
  @for $i from 1 through 25 {
    &:nth-child( #{$i} ) {
      $col: $i * $increment;
      background-color: darken($color-green, $col);
    }
  }
}

This will loop through 25 elements that have the class my-class and apply an increasingly dark background colour to each.

An little expermiment featuring this can be found over here on CodePen.

Dev Notes

I’m using flex and vw/vh units to give us a perfectly tiled full-page result. This may not work in all browsers. I wrote a little about viewport units in another post earlier.

Leave a Reply

Your email address will not be published. Required fields are marked *