输出中带有反斜杠的Sass变量插值

我正在为我的网站创建一些图标字体规则。使用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)}";
    }
}

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

问题在于

内容：

行上的反斜杠。我需要它来进行字符编码，但它逃避了变量插值，输出如下所示的CSS：

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

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

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

再添加一个反斜杠如下：

content:“\\\{nth（$icon，2）}”输出此CSS：

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

有没有办法让Sass在保持变量插值的同时只输出一个反斜杠的CSS？
您可以将反斜杠添加到
$icons
变量中的参数中。就是

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

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

生成的CSS：

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

.icon-wifi-hotspot {
  content: "\601"; 
}

.icon-weather {
  content: "\602"; 
}   

如果在实际变量中包含反斜杠，那么当sass生成css时，它将实际生成计算出的unicode字符，而不是在css输出中输出unicode。这通常仍然有效，但如果出现问题，则很难进行调试，并且在呈现图标时更容易在浏览器中引起问题

要在生成的CSS中输出实际的unicode，可以执行以下操作：

@function icon($character){
    @return unquote('\"') + unquote(str-insert($character,'\\', 1)) + unquote('\"');
}

$icon-thing: "e60f";

.icon-thing:before {
    content: icon($icon-thing); //outputs content: "\e60f";
}

我把插值搞乱了，这就行了


//----
//Sass（v3.4.21）
//罗盘（v1.0.3）
// ----
$图标：
wifi 600，
wifi热点601，
天气602 ;；
@$icons中的每个$icon{
.icon-#{n（$icon，1）}，
%图标-#{n（$icon，1）}{
内容：#{''\\'+n（$icon，2）+''''}；//如果您使用Gulp编译Sass文件，安装此Gulp插件可能是解决此问题的最简单方法：


输出CSS

$testContent: "\f26e";

#test {
  content:  $testContent;
}

#test {
  content: "\f26e";
}

不幸的是，这些解决方案并不完全适用于我，但我最终能够让它与
SASS地图一起使用

//node-sass 4.11.0
//libsass 3.5.4

$hexes: (
           checkmark: \2714
        );

@function out-content($var) {
    @return unquote("\"#{ $var }\""); 
}

@each $mod, $code in $hexes {    
    .#{$mod}-after {
        &:after {
            content: out-content($code);
        }
    }
}

//output
//.checkmark-after:after {
    //content: "\2714";
//}

使用反引号和双斜杠

$var:123→ 内容：“\e123”

谢谢！这很有效。但是我想知道是否有一个字符序列或函数允许反斜杠在$icons变量之外。@Ben你真的需要将反斜杠分开吗？@cimmanon不，答案为我的问题提供了一个解决方案。我只是想知道技术方面的问题。有没有办法输出反斜杠在sass 3.3中，可以通过从字符串中分割反斜杠，然后将其与任何代码（如so
str slice（“\x”，1,1））组合来克服此问题+$code
。在这里看到我的答案：该死，这看起来不再管用了。我正在生成带有奇怪字符的CSS，而不是反斜杠。在Sass 3.4.13中，在那里尝试此解决方案：我相信这与此问题有关：您的函数中有一个额外的结束括号对我来说是最好的解决方案！这对我很有效：）内容：{'\\'+$unicode+'''''}