我目前正在Angular中构建一个web应用程序，在输出的最终颜色中偶然发现了一些非常奇怪的差异。前提是：
我在app.component.scss的主机中有一个全局颜色变量--primary-color-in-host: rgba(38, 50, 56, 0.9)
我想在我的应用程序的各个组件中使用这个颜色变量，并能够成功地使用：CCD_ 2。
没问题。不过，我也希望偶尔对这种颜色应用不透明度。这就是问题出现的地方。
通常，如果在组件的scss$primary-color-local: rgba(38, 50, 56, 0.9)中本地声明一个变量，则可以成功地将不透明度应用于该变量，如：color:rgba($primary-color-local, .5)。但是，因为我已经在：host中全局声明了变量(请参见上文(，当我尝试使用rgba(var(--primary-color-in-host), .5)应用它时，不透明度不适用。我只是得到了颜色，但没有透明度！
当然，我可以在每个组件的.scs中重新声明这个颜色，但我希望避免这样做(原因很明显(。但在我开始解决这个问题之前，我需要了解表面下发生了什么。为什么它在本地工作，但当颜色从主机中提取时却不工作？
我在
:host中有一个全局变量
您指的是:root还是模板的:host？
无论如何，它是"本地"工作的，因为您将颜色保存为SASS变量，这允许(SASS(解析器将其替换为实际值，然后在传输文档之前尝试弄清楚您到底想要什么，并可能修复一些错误。
SASS不涉及本机CSS变量，这些变量是在运行时动态计算的。当浏览器引擎将您的自定义属性计算为rgba(rgba(38, 50, 56, 0.9), .5)时，它不知道您要做什么。
这个答案将更详细，以及你可能如何解决它