CSS变量到SASS变量=不透明功能出现问题

Question

考虑这个问题...两张.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变量值，则不能这样做

...知道如何解决吗？我对我的理解有误吗？

谢谢

Answer 1

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