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变量

1 个答案: