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（ - 应用彩色）

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

rgba（）可以处理两个完美的参数（$ color，$ alpha），但是如果$ color / $ alpha填充了CSS变量值则不行;

......任何想法如何解决这个问题？我错了我的理解吗？

谢谢

Answer 1

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