无法将 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; */
}