css - 在 CSS3 变量定义中使用 SCSS 变量不起作用？

Question

我正在弄清楚如何将样式应用于客户端元素中的可重用 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。

Answer 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);