sass unicode字符编码问题

发布于 2022-09-06 01:10:35 字数 1028 浏览 28 评论 0

$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("\"")
}

我想问问还有其他能解决的办法么?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文