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

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

cannot assign SCSS values to css custom properties (css variables)

css

sass

css-variables