相关疑难解决方法(0)

我正在创建一些图标字体规则,以便在我的网站中使用.使用Sass我想列出列表变量中的所有图标,并使用@each循环遍历它们.

代码如下所示:

$icons: 
    wifi 600,
    wifi-hotspot 601,
    weather 602;

@each $icon in $icons {
    .icon-#{nth($icon, 1)}, 
    %icon-#{nth($icon, 1)} {
        content: "\#{nth($icon, 2)}";
    }
}

问题是content:线路上的反斜杠.我需要它用于字符编码,但它逃避变量插值,输出如下所示的CSS:

.icon-wifi {
  content: "\#{nth($icon, 2)}";
}

像这样添加一个反斜杠:content: "\\#{nth($icon, 2)}";输出这个CSS:

.icon-wifi {
  content: "\\600";
}

有没有办法让Sass在保持变量插值的同时只用一个反斜杠输出CSS？

是一个解决方法或任何其他方式使这个工作在Sass 3.4 +

@mixin icon ($name, $code) {
.#{$name}::before {
content: str-slice("\x",1,1) + $code;}
}

@include icon('test', 4556);

代码应该输出

.test :: before {content:"\ 4556"; }

但是在3.4+上\斜线被删除并输出为

.test :: before {content:"x4556"; }

谢谢