在下面的SCSS中,我想在url background-image属性中使用fg-color变量.
$fg-color: #ff6464;
i.icon-back {
background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23ff6464'/></svg>");
}
此时,变量的值在SVG字符串中简单重复,如下所示：
fill='%23ff6464'
我希望每当更新fg-color变量时都会自动更新.
我怎样才能做到这一点？
更新：
此输入SCSS：
i.icon-back {
background-image: url("data:image/svg+xml;charset=utf-8,0z' fill='$fg-color'/></svg>");
}
输出此CSS：
i.icon-back {
background-image: url("data:image/svg+xml;charset=utf-8,0z' fill='$fg-color'/></svg>");
}
……它完全相同 – 不处理变量.
注意：
我已经回顾了这些看似相似的问题,但不一样：
> Creating a Data URI’s from SCSS
> Using an Data URI SVG as a CSS background image
解决方法
首先,创建一个SASS功能.
这个(ab)使用字符串插值将颜色转换为字符串,
然后剥去第一个字符(应该总是’#’),
并将’#’放在其位置(URL编码形式为’#’).
这个(ab)使用字符串插值将颜色转换为字符串,
然后剥去第一个字符(应该总是’#’),
并将’#’放在其位置(URL编码形式为’#’).
@function url-friendly-colour($colour) {
@return '%23' + str-slice('#{$colour}',2,-1)
}
然后使用函数 – 但是为了使它在字符串中工作,必须使用#{}进行插值.
i.icon-back {
background-image: url("data:image/svg+xml;charset=utf-8,0z' fill='#{url-friendly-colour($fg-color)}'/></svg>");
}
当然,这种方法的警告是,它不适用于颜色
由颜色名称而不是十六进制颜色指定.
例如. #f00有效但红色不会.
