在 CSS3 变量定义中使用 SCSS 变量不起作用? [英] Using SCSS variable inside CSS3 variable definition not working?

问题描述

我正在研究如何从客户端项目中将样式应用于可重用的 Angular 组件.请参阅 主题/样式 Angular 2 可重用组件库 => 寻找跟进".

I am figuring out how to apply styling to a reusable Angular component from within a client project. See Theme/style Angular 2 reusable component libraries => look for "follow up".

我现在还有一个问题:

我尝试在 CSS 变量中使用 SCSS 变量，但该 CSS 变量似乎未定义:

I try to use a SCSS variable inside a CSS variable, but that CSS variable does not seem to be defined:

$primary-color: #666666;

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

在其他组件中(在其他组件库中，单独构建):

In other component (in other component library, built separately):

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

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

$primary-color seems to be empty... not #666666, neither #5FB0FD.

推荐答案

要将 Sass 变量转换为 CSS 变量，您需要 插值:

To convert a Sass variable to a CSS variable, you need to interpolate it:

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

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

Once you've converted your Sass variable into CSS, there's no getting it back. Therefore, in your other component you should maybe stick with pure CSS. The following will use #5FBOFD if --ang-ux-primary-color is undefined.

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

这篇关于在 CSS3 变量定义中使用 SCSS 变量不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！