Sass变量插值，输出中带有反斜杠 [英] Sass variable interpolation with backslash in output

问题描述

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

I'm creating some icon font rules for using in my site. Using Sass I wanted to list all the icons in a list variable and use @each to loop through them all.

代码如下:

$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:

The problem is the backslash on the content: line. I need it for the character encoding, but it escapes the variable interpolation, outputting CSS that looks like this:

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

再添加一个反斜杠，如下所示:content: "\\#{nth($icon, 2)}";输出以下CSS:

Adding one more backslash like this: content: "\\#{nth($icon, 2)}"; outputs this CSS:

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

有没有办法让Sass仅用一个反斜杠输出CSS，同时又保持变量插值?

Is there a way to get the Sass to output CSS with only a single backslash while keeping the variable interpolation?

推荐答案

您可以将反斜杠添加到$icons变量中的参数中.也就是说，

You can add the backslash to the parameter in the $icons variable. That is,

$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变量插值，输出中带有反斜杠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！