Css sass与Base64的$var混合

我正在尝试为我的svg图标创建简单的mixin

Mixin:

@mixin ico($position, $size, $image) {
    background-image: url(data:image/svg+xml;base64,$image);
    background-repeat: no-repeat;
    background-size : $size;
    background-position: $position;
    background-color: $blue-dark;
    height: 30px;
    padding-left: 30px;
}

"Syntax error: Invalid CSS after \"...image: url(data\": expected comma, was \":image/svg+xml;...\"\A

SASS错误：

@mixin ico($position, $size, $image) {
    background-image: url(data:image/svg+xml;base64,$image);
    background-repeat: no-repeat;
    background-size : $size;
    background-position: $position;
    background-color: $blue-dark;
    height: 30px;
    padding-left: 30px;
}

"Syntax error: Invalid CSS after \"...image: url(data\": expected comma, was \":image/svg+xml;...\"\A

我不知道怎么绕过它

---

提前感谢您的帮助。

您需要在此处使用字符串插值。您可能需要引用它，然后使用

unquote（）

函数

$blue-dark: blue;
@mixin ico($position, $size, $image) {
    background-image: url(data:image/svg+xml;base64,#{$image});
    background-repeat: no-repeat;
    background-size : $size;
    background-position: $position;
    background-color: $blue-dark;
    height: 30px;
    padding-left: 30px;
}
.foo {
    @include ico(0, 10, foo);
}

值得注意的是，如果您希望能够为不支持SVG背景的浏览器提供回退，则需要使用背景速记，其中包括

背景大小

：

.foo {
    background: url(foo.png) no-repeat;
    background: url(foo.svg) 0 0 / auto auto no-repeat;
}

---

工作起来很有魅力。非常感谢。