Sass Color Functions

Sass/SCSS has many built in functions that allow us to do some really cool things. I love using the color functions to manipulate colors, so that I don't have to look up another hex code. Some examples of different color functions:

background-color: lighten(#32C4BC, 15%);
background-color: darken(#32C4BC, 35%);
background-color: saturate(#A1A3E0, 30%);
background-color: desaturate(#2EA265, 35%);
background-color: rgba(#2EA265, 0.6);

These functions also can be used with Sass/SCSS variables like this:

$color: #12AF8A; 
background-color: darken($color, 15%);

The lighten and darken function can be used to create a list of colors that are similar in shade but lighter or darker. Here's an example on how to generate different shades of the color #F2E68E using the darken color function.

$len: 6;
$main-color: #F2E68E;

@function createShades($color, $len) {
  $list: [];
  @for $i from 1 through $len {
    $val: $i * 3%;
    $color: darken($color, $val);
    $list: append($list, $color);
  } 
  @return $list;
}

$shadeList: createShades($main-color, $len);

@for $i from 1 through $len {
  .box:nth-child(#{$i}) {
    background: nth($shadeList, $i);
  }
}

View this on Codepen.