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

Question

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

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

我正在尝试在SASS函数中使用它来提高透明度：

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

有谁知道使它工作的方法？还是只是不可能？

Answer 1

#{var(--variablename)}

这就是在 SCSS 中使用 CSS 变量的方式

Answer 2

如果您正在寻找一种使用 sass 颜色函数来调整颜色的方法（我觉得这是人们来到这里的主要原因），这里有一个适合您的解决方案。这个想法与 Juanete Montoya 的答案相同，但它是纯 sass/scss （没有 php）：

首先，我们需要将颜色拆分为 hsla 值，并将每个值保存在单独的自定义属性中。

@mixin define-color($title, $color) {
    --#{$title}-h: #{hue($color)};
    --#{$title}-l: #{lightness($color)};
    --#{$title}-s: #{saturation($color)};
    --#{$title}-a: #{alpha($color)};
}

现在我们可以将其重新组合在一起，并在途中进行一些调整。

@function color($title, $hue: 0deg, $lightness: 0%, $saturation: 0%, $alpha: 0) {
    @return hsla(
        calc(var(--#{$title}-h) + #{$hue}), 
        calc(var(--#{$title}-s) + #{$saturation}),
        calc(var(--#{$title}-l) + #{$lightness}),
        calc(var(--#{$title}-a) + #{$alpha}),
    );
}

现在我们准备定义一些颜色变量......

:root {
    @include define-color("primary", #696969);
    @include define-color("secondary", blue);
}

使用并调整它们！

.example-class {
    color: color("primary");
    background: color("secondary", $lightness: +20%, $alpha: -0.3);
    border: 1px solid color("primary", $hue: -30deg, $saturation: 5%);
}

Answer 3

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

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

您可以定义如下函数：

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

并把它叫到你的无礼

body { 
  color: color(primary); 
}

编译的sass代码是：

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

Answer 4

不幸的是，这是不可能的。CSS 变量在运行时替换它们的值。SASS 编译器就是这样一个编译器，它无法读取 CSS 变量的值，因为 CSS 变量可以在其他文件中定义。