$icons: (
"address-book" "\f2b9",
"address-card" "\f2bb"
);
@function match($haystack,$needle){
@each $item in $haystack{
$index:index($item,$needle);
@if $index{
$return: if( $index == 1,2,$index);
@return nth($item,$return);
}
}
@return false;
}
@mixin icon($position:"before",$icon:false){
&:#{$position}{
content: match($icons,$icon);
}
}
.#{$css-prefix}address-book{
@include icon($position:"before",$icon:"address-book");
}
.#{$css-prefix}address-card{
@include icon($position:"before",$icon:"address-card");
}
在$icons中的"f2b9"这种字符,在经过sass编译后就变成了实体的图标或者不可见的字符,如何解决这个问题,在github上我查询到这个解决方法
// @source - [@Stephn-R](https://github.com/sass/sass/issues/1395#issuecomment-57483844)
// @description converts 1 or more characters into a unicode
// @markup {scss}
// unicode("e655"); // "\e655"
@function unicode($str){
@return unquote("\"")+unquote(str-insert($str, "\\", 1))+unquote("\"")
}
我想问问还有其他能解决的办法么?