无法将 SCSS 值分配给 css 自定义属性（css 变量）

Question

为了确保可读性和可维护性，我想声明几个值，例如颜色，但只声明一次。

我遇到的问题是，似乎不可能将 sass 函数的结果甚至简单的变量直接分配给 css 变量。

.some-selector {
    --my-css-variable: $my-color; // nope
    --my-css-variable: mySassFunction(); // nope
    --my-css-variable: transparentize($my-color, .5); // nope
    --my-css-variable: copy-pasted-value; // alright
}

我似乎无法在搜索引擎上找到任何答案，最多只能找到不相关的主题。你可以帮帮我吗？

Answer 1

尝试使用插值法#{...}

$my-color: #fff;

@function myFunction() {
    @return #000;
}

.some-selector {
    --my-css-variable: #{$my-color}; 
    /* output: --my-css-variable: #fff; */
    --my-css-variable: #{myFunction()}; 
    /* output: --my-css-variable: #000; */
}