带有 $var 的 sass mixin 用于 Base64

Posted 2023-03-06

【中文标题】带有 $var 的 sass mixin 用于 Base64

【英文标题】：sass mixin with $var for Base64

【发布时间】：2014-01-18 23:32:44

【问题描述】：

我正在尝试为我的 svg 图标创建简单的 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;

SASS 错误：

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

不知道如何绕过它。

提前感谢您的帮助。

【参考方案1】：

你需要在这里使用字符串插值。您可能需要引用它，然后使用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 背景的浏览器提供回退，您将需要使用包含 background-size 的背景简写：

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

【讨论】：

像魅力一样工作。谢谢！