在 CSS3 变量定义中使用 SCSS 变量不起作用？答案

【问题标题】：Using SCSS variable inside CSS3 variable definition not working?在 CSS3 变量定义中使用 SCSS 变量不起作用？
【发布时间】：2018-05-25 17:13:56
【问题描述】：

我正在研究如何从客户端项目中将样式应用于可重用的 Angular 组件。见Theme/style Angular 2 reusable component libraries => 寻找“跟进”。

我现在还有一个问题：

我尝试在 CSS 变量中使用 SCSS 变量，但似乎没有定义该 CSS 变量：

$primary-color: #666666;

// styling reusable components
:root {
  --ang-ux-primary-color: $primary-color;
}

在其他组件中（在其他组件库中，单独构建）：

$primary-color: var(--ang-ux-primary-color, #5FB0FD);

$primary-color 似乎是空的...不是#666666，也不是#5FB0FD。

【问题讨论】：

已更改，谢谢 :-)
sass 中没有 var 这样的函数。在您的情况下，$primary 的值就是：var(--ang-ux-primary-color, #5FB0FD)。分配的样式是否无法呈现$primary-color？ css 输出是什么？

【解决方案1】：

要将Sass变量转换为CSS变量，需要interpolate it:

--ang-ux-primary-color: #{$primary-color};

一旦您将 Sass 变量转换为 CSS，就无法取回它。因此，在您的其他组件中，您可能应该坚持使用纯 CSS。如果--ang-ux-primary-color 未定义，以下将使用#5FBOFD。

--ang-ux-primary-color: var(--ang-ux-primary-color, #5FB0FD);

【讨论】：