0

I am trying to use a Saas var called $green:

$green: 60, 187, 180;   // 60, 187, 180 are my values in rgb

Later I am trying use this color to include in background-color propery:

.icon-button[aria-label="thumbs up"] {
  background-color: rgba($green, 0.8);
}

.icon-button[aria-label="thumbs up"]:hover {
 background-color: rgba($green, 1);
}

I am getting "SassError: $color: 60, 187, 180 is not a color." who can I fix it?

thanks..

yavg
  • 2,761
  • 7
  • 45
  • 115

1 Answers1

1

With DART SASS you can use the color build-in module.

Sass: sass:color

You could use the scale function:

color.scale($green, $alpha: -20%)

But note that in this example the opacity is reduced by 20% (1 - 0.2 = 0.8). So you can reduce/increase the opacity by this value (not set it to the desired value).

So a solution would be:

This SASS

$green: rgb(60, 187, 180); // 60, 187, 180 are my values in rgb

.icon-button[aria-label="thumbs up"] {
    background-color: color.scale($green, $alpha: -20%);
}

.icon-button[aria-label="thumbs up"]:hover {
    background-color: color.scale($green, $alpha: 0%);
}

becomes this CSS:

.icon-button[aria-label="thumbs up"] {
  background-color: rgba(60, 187, 180, 0.8);
}

.icon-button[aria-label="thumbs up"]:hover {
  background-color: #3cbbb4;
}

EDIT: Another approach would be to use CSS variables. So, dynamic transparency values ​​must be inserted into the RGB color values ​​using SASS functions and / or mixins and then reassembled into a RGBA string. I followed this approach to allow the user to add their own themes to a system without having to use SASS themselves. In this code snipped from me you can perhaps guess what it might look like later. CSS: CSS Variable is not defined in pseudo element

michaelT
  • 1,533
  • 12
  • 41