What are lighten() and darken() functions good for in Sass?

Experience Level: Junior
Tags: Sass

Answer

The lighten() function makes the color you provide lighter by number of percent you provide. The darken() function makes the color you provide darker by number of percent you provide.

Both of these functions help quite a lot when you design components and derive hover colors from the input color.

Sass

$inputColor: red;

.tint1 {
  background: $inputColor;
}

.tint-d1 {
  background: darken($inputColor, 10%);
}

.tint-d2 {
  background: darken($inputColor, 30%);
}

.tint-d3 {
  background: darken($inputColor, 50%);
}

.tint-l1 {
  background: lighten($inputColor, 10%);
}

.tint-l2 {
  background: lighten($inputColor, 30%);
}

.tint-l3 {
  background: lighten($inputColor, 50%);
}

CSS

.tint1 {
  background: red;
}

.tint-d1 {
  background: #cc0000;
}

.tint-d2 {
  background: #660000;
}

.tint-d3 {
  background: black;
}

.tint-l1 {
  background: #ff3333;
}

.tint-l2 {
  background: #ff9999;
}

.tint-l3 {
  background: white;
}

Comments

No Comments Yet.
Be the first to tell us what you think.
Sass for beginners
Sass for beginners

Are you learning Sass ? Try our test we designed to help you progress faster.

Test yourself