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;
}

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

Chat

Oh, the operator is not available. Leave us your comments. We will answer all your questions as soon as possible.

Comments

Anonymous
Καλησπέρα.
Anonymous
the infinteis -3/15 so 1triition / infinet
Anonymous
e
Anonymous
<a href="https://inspirum.pl "
Anonymous
[url]https://inspirum.pl[/url]
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e