lighten-and-darken-with-scss.md

Lighten And Darken With SCSS

With SCSS, a color can be lightened or darkened by a certain percentage using the lighten and darken functions, respectively.

For instance, given the following HTML

<div class='one'></div>
<div class='two'></div>
<div class='three'></div>

I can style div.two with the original color and then style div.one with a lightened version and div.three with a darkened version.

$box-color: #0074d9;

.two {
  background: $box-color;
}
.one {
  background: lighten($box-color, 20%);
}
.three {
  background: darken($box-color, 20%);
}

The result looks something like this: