记一次scss报错，@mixin and @include 变量空格

写scss时，用上@minix 规则，如下

--si-success: 70, 201, 58;

@mixin state($color) {
    .si-input {
        background: rgba(var(--si-$color), 0.1) !important;
        color: rgba(var(--si-$color), 1);
    }
}

...
&--state-success {
    @include state(success);
}
...

期望结果是

background: rgba(var(--si-success), 0.1) !important;
color: rgba(var(--si-success), 1);

可实际结果是

background: rgba(var(--si- success), 0.1) !important;
color: rgba(var(--si- success), 1);

变量前多了空格

看了下官方文档，没看到空格相关情况，剩下我一脸懵逼

解决办法

将@minix 规则改一下，用加号连接

@mixin state($color) {
    .si-input {
        background: rgba(var(--si- + $color), 0.1) !important;
        color: rgba(var(--si- + $color), 1);
    }
}

这样结果就正常了