Sass mix() function is giving error with valid color values

user_18777952 0
Viewed 80

_theme-var.scss

//color palette
$colors:(
    "primary":#ff0000,
    "secondary":#898989,
    "dark":#360000,
    "light":#ffaeae,
    "white":#fff
);

style.scss

@import "./theme-var";

@each $key,$val in $colors{
    .text-#{$key}-color{
        color: $val;
    }
    .bg-#{$key}-color{
        background-color:$val;
    }

    @for $i from 1 through 9{
        .text-#{$key}-color-light-#{$i}{
            color: mix(#ffff, #{$val},$i*10); // getting error for this line 
        }
    }
}

ERROR It says that argument $color-1 of mix($color-1, $color-2, $weight: 50%) must be a color, I am passing color and also $val contains valid hax color what could be the reason for error? ERROR SCREENSHOT MIX() FUNCTIONS ERROR MESSAGE

sass
1 Answers

You need to remove the interpolation on #{$val}. The variable is already a color and the interpolation seems to convert it to something else, that's why you get this error.

@for $i from 1 through 9 {
    .text-#{$key}-color-light-#{$i}{
        color: mix(#ffff, $val, $i*10);
    }
}
user_97180560
Related