CSS 变量到 SASS 变量 = 不透明度函数的问题答案

【问题标题】：CSS variable to SASS variable = problem with opacity functionCSS 变量到 SASS 变量 = 不透明度函数的问题
【发布时间】：2019-02-18 08:23:06
【问题描述】：

考虑这个问题...两张 .scss 工作表

*styles.scss*
@import _variables.scss

--app-color: rgb(0,0,0); //css variable

*_variables.scss*

$color: var(--app-color); //CSS to SASS variable

现在我们可以在任何地方使用用 CSS 变量颜色填充的 $color 变量，并且它可以工作。

我的问题是使用这个 SASS/CSS 变量来设置不透明度。看看这个 =>

background: rgba($color, .1);

它不会工作......因为在这种情况下 $color 不会像我定义的普通颜色值那样传递（

rgb(0,0,0)

) 但喜欢 (

var(--app-color)

和函数 rgba() 可能不知道如何处理这个参数。

rgba() 可以处理两个参数 ($color, $alpha) 可以完美运行，但如果 $color/$alpha 填充了 CSS 变量值则不能）

...知道如何解决这个问题吗？我对它的理解有误吗？

谢谢

【问题讨论】：

【解决方案1】：

我认为您误认为 css functional notation for color 和 sass rgba() function 它们可能具有相似的语法，但它们是完全不同的功能。第一个需要三个参数，第二个只有在编译前传递了两个参数才能工作，因此不能使用随时变化的css变量。

【讨论】：