有什么方法可以在SASS函数中使用CSS变量吗? [英] Any way to use CSS Variables in SASS functions?

问题描述

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

I have defined a color in my root:

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

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

And I'm trying to use it in a SASS function to give it transparency:

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

有人知道让它正常工作的方法吗?还是只是不可能?

Does anyone know of a way to get this to work? Or is it just not possible?

推荐答案

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

Global variables can be defined outside of an element in a :root pseudo-class:

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

您可以定义如下函数:

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

并将其调用到您的无聊中:

and call it into your sass:

body { 
  color: color(primary); 
}

已编译的sass代码为:

compiled sass code is:

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

这篇关于有什么方法可以在SASS函数中使用CSS变量吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！