Search code examples
angularsass

Angular x SCSS: Rgba does not evaluate HEX value

I'm trying to access the background colour of the Angular theme. It woks as a HEX value but I need to apply transparency to the colour.

I have this variable definition:

:root {
    --opacity: .15;
    --primary: #4caf50;
    --accent: #6a1b9a;
    --warn: #f44336;

exporting the function

@function getColor($color, $opacity: 1) {
    @return rgba(var(--#{$color}), $opacity);
}

with this function which is supposed to give the color with alpha value:

and somewhere in another component file there is:

@use "whatever" as UI;
[_nghost-ng-c2555015885] mat-sidenav[_ngcontent-ng-c2555015885] {
    outline: UI.getColor(primary, .25) 1px solid;
}

I would expect the colour to be evaluated but instead I just get plain text.

Image

https://stackblitz.com/~/github.com/wataBottl/stackblitz-starters-gxm7p4

Solution

  • You cannot use rgba() like that with a hex value, it needs to be converted to rgb first. Also rgba() is considered legacy syntax. Updated code with modern syntax:

    @function getColor($color, $opacity: 1) {
    @return rgb(from var(--#{$color}) r g b / $opacity);
}

    For more information, see the docs.