Angular Can'；t将不透明度应用于：主机颜色变量

我目前正在Angular中构建一个web应用程序，在输出的最终颜色中偶然发现了一些非常奇怪的差异。前提是：

我在中有一个全局颜色变量：host of app.component.scss

——主机中的原色：rgba（38,50,56,0.9）

我希望在我的应用程序中的各个组件中使用此颜色变量，并能够使用以下方法成功完成此操作：

var（--主机中的原色）

没问题。但是，我也希望偶尔对这种颜色应用不透明度。这就是问题所在

通常，如果在组件的SCS中局部声明变量，

$primary color local:rgba（38,50,56,0.9）

，则可以成功地对变量应用不透明度，如：

color:rgba（$primary color local.5）

。但是因为我已经在：host（见上文）中全局声明了变量，当我尝试使用

rgba（var（--主机中的原色），.5）应用它时，不透明度不适用。我只知道颜色，但不知道透明度

当然，我可以在每个组件的.scs中重新声明此颜色，但我希望避免这样做（出于明显的原因）。但在我开始解决这个问题之前，我需要了解表面下发生了什么。为什么它在本地工作，而不是在从主机提取颜色时工作

我在
：host

您是指
：root
，还是模板的
：host

无论如何，它是“本地”工作的，因为您正在将颜色保存为SASS变量，这允许（SASS）解析器将其替换为实际值，然后在传输文档之前尝试弄清楚您到底想要什么，并可能修复一些错误

SASS不涉及本机CSS变量，这些变量是在运行时动态计算的。当浏览器引擎将您的自定义属性计算为
rgba（rgba（38,50,56,0.9），.5）
时，它不知道您试图做什么

答案会更详细，以及您可能如何解决它。
它会与主机中的
--原色：rgb（38，50，56）
（不包括变量定义中的不透明度）？也许可以尝试插值：
颜色：rgba（#{$primary color local}，0.5）
？@ConnorsFan，我以前曾想过这个想法。不行。@Z.Bagley我想你误解了这个问题。我已经得到了在本地工作的颜色。我想让它从app.component.scss中的：host:host开始工作。我已经看过这个答案了。这就是我第一次学习如何应用不透明度的地方。问题不是我不能应用不透明度。我已经解决了这个问题。问题是我不能像处理局部变量那样处理全局变量。是的，因为您将局部变量声明为SASS变量。至少在你的例子中你是这样做的。SASS解析器将查看您的代码，发现您将rgba（）规则嵌套在另一个规则中，并修复该问题。SASS不涉及CSS自定义属性，浏览器引擎将按原样计算它们。它确实有效。解析器能够从中找出我想要的东西。所以我不太确定你得到的是什么…在不使用SASS的情况下再次测试它。