输出反斜杠的Sass变量插值

Question

我正在创建一些图标字体规则，用于我的网站。使用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只输出一个反斜杠，同时保持变量内插？

Answer 1

可以将反斜杠添加到$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"; 
}   

Answer 2

我把这件事搞砸了

sassmesiter演示

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

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

@each $icon in $icons {
    .icon-#{nth($icon, 1)}, 
    %icon-#{nth($icon, 1)} {
        content: #{'"\\' + nth($icon, 2) + '"'}; // <------ See this line
    }
}

编译成

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

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

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

Answer 3

如果在实际变量中包含反斜杠，那么当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";
}