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?
Seems there were breaking changes with a new version of SASS and this now requires using the
sass:color
module.