What is scale-color() function good for in Sass?

Experience Level: Junior
Tags: Sass

Answer

The scale-color() function allows to fluidly scale different color properties.

The following color properties can be modified:

  • $red - color red channel
  • $green - color green channel
  • $blue - color blue channel
  • $saturation - color saturation
  • $lightness - color lightness
  • $alpha - color alpha channel
Sass
$color: red;
.color1 {
  background: scale-color($color, $red: 10%);
}

.color2 {
  background: scale-color($color, $lightness: -30%);
}
CSS

.color1 {
  background: red;
}
.color2 {
  background: #b30000;
}
Related Sass job interview questions
Sass for beginners
Sass for beginners

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

Test yourself