Angular 10 division on scss color variable

Question

I am rebuilding an Angular 7 app with Angular 10.

In the previous version, I used this following for some hover color adjustments on links:

variables.scss

$mycolor: #050505;

app.component.scss

@import '~assets/scss/variables.scss';
a {
    color: $mycolor;
    &:hover {
        color: $mycolor / 1.1;
    }
    &:active {
        color: $mycolor * 1.3;
    }
}

This approach no longer seems to work, as I receive SassError: Undefined operation "#050505 / 1.1". How can I implement basic math functions with SCSS variables in Angular 10?

Answer 1

Seems there were breaking changes with a new version of SASS and this now requires using the sass:color module.

@use 'sass:color';
&:hover {
    color: color.adjust($mycolor, $lightness: -10%);
}

Answer 2

Here you go ;)

Just wrap your calculations in "#{ //calculation }" this madness.

$mycolor: #2196f3;

a {
    color: $mycolor;
    &:hover {
        color: #{$mycolor / 1.1};
    }
    &:active {
        color: #{$mycolor * 1.3};
    }
}

Output:

a {
  color: #2196f3;
}
a:hover {
  color: #1e88dd;
}
a:active {
  color: #2bc3ff;
}

I used to forget this all the time, can be hella frustrating.