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

Question

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

我现在还有一个问题：

我尝试在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。如果#5FBOFD未定义，则以下内容将使用--ang-ux-primary-color。

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