Angular x SCSS：Rgba 不评估十六进制值

Question

我正在尝试访问 Angular 主题的背景颜色。它作为十六进制值工作，但我需要对颜色应用透明度。

我有这个变量定义：

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

导出函数

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

这个函数应该给出具有 alpha 值的颜色：

在另一个组件文件中的某个地方有：

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

我希望对颜色进行评估，但我只是得到纯文本。

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

Answer 1

不能像十六进制值那样使用

rgba()

，需要先将其转换为rgb。此外

rgba()

也被认为是遗留语法。使用现代语法更新了代码：

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

有关更多信息，请参阅文档。