当我使用 var 和 rgba 时,CSS 变量在 SCSS 中不起作用
CSS variable not working within SCSS when I use var and rgba
我已经四处搜索了这个,但 none 似乎有效。
我正在 Angular 上工作,我的 scss 变量在根文件中,styles.scss 在 :root 伪选择器中。以下在我的组件 scss 中有效;
:root {--color-primary-green:#00e676}
background-color:var(--color-primary-green);
当我尝试使用 rgba 时,颜色消失了,即
background-color: rgba(var(--color-primary-green), 0.5);
我该如何解决这个问题?
在您的样式变量文件中包含颜色的十六进制和 rgba 版本。然后你可以在需要的时候使用rgb值。
:root {
--color-primary: #2dd36f;
--color-primary-rgb: 45, 211, 111;
}
.hex-bg {
background-color: var(--color-primary);
}
.rgba-bg {
background-color: rgba(var(--color-primary-rgb), 0.5);
}
div {
padding: 8px;
margin: 8px;
}
<div class="hex-bg">
background with hex value
</div>
<div class="rgba-bg">
background with rgba value
</div>
首先,要为 CSS 属性 定义颜色,它必须与 color type format.
相同
如果您使用 VSCode,使用 this extension 可以很容易地在不同的颜色类型之间切换。
我已经四处搜索了这个,但 none 似乎有效。
我正在 Angular 上工作,我的 scss 变量在根文件中,styles.scss 在 :root 伪选择器中。以下在我的组件 scss 中有效;
:root {--color-primary-green:#00e676}
background-color:var(--color-primary-green);
当我尝试使用 rgba 时,颜色消失了,即
background-color: rgba(var(--color-primary-green), 0.5);
我该如何解决这个问题?
在您的样式变量文件中包含颜色的十六进制和 rgba 版本。然后你可以在需要的时候使用rgb值。
:root {
--color-primary: #2dd36f;
--color-primary-rgb: 45, 211, 111;
}
.hex-bg {
background-color: var(--color-primary);
}
.rgba-bg {
background-color: rgba(var(--color-primary-rgb), 0.5);
}
div {
padding: 8px;
margin: 8px;
}
<div class="hex-bg">
background with hex value
</div>
<div class="rgba-bg">
background with rgba value
</div>
首先,要为 CSS 属性 定义颜色,它必须与 color type format.
相同如果您使用 VSCode,使用 this extension 可以很容易地在不同的颜色类型之间切换。