css - 有什么方法可以在SASS函数中使用CSS变量吗？

Question

我在根中定义了一种颜色:

:root {
--purple: hsl(266, 35%, 70%);
}

我正在尝试在SASS函数中使用它以使其具有透明度:

.purple {
  background: transparentize(#{"var(--primary-color)"}, 0.7)
}

有谁知道一种使它起作用的方法吗？还是只是不可能？

Answer 1

全局变量可以在:root伪类的元素外部定义:

:root {
  --color-background: #FFFFFF;
}

您可以定义如下函数:

@function color($color-name) {
  @return var(--color-#{$color-name});
}

并把它叫到你的无聊中:

body { 
  color: color(primary); 
}

编译的sass代码是:

body { 
  color: var(--color-primary); 
}