如何使用SASS使用相对颜色？

Question

我想在我用 Nuxt 制作的项目中使用相对颜色。

当我添加这行代码时：

  background-color: rgb(from var(--color) r g b / .5);

SASS 抛出此错误： SassError：只允许 3 个元素，但传递了 5 个元素。

有什么办法可以绕过它吗？

Answer 1

您想像这样使用

rgba

（不是

rgb

）：

background-color: rgba(var(--color), 0.5);

---

编辑

background-color: rgba(var(--color), 0.5) !important;

Answer 2

我有完全相同的案例和问题，我发现的解决方法是使用 sass 的 unquote-function。

$color: 'rgb(from var(--color) r g b / .5'
background-color: unquote($color);

另一种设置是将 CSS 文件添加到我的 Angular 项目中，但这更干净一些。

我想知道相对颜色何时会在 SASS 中完全实现。我确实找到了这个相关问题：https://github.com/sass/sass/issues/3673