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

【问题标题】：Sass variable interpolation with backslash in output输出中带有反斜杠的 Sass 变量插值
【发布时间】：2014-03-03 17:51:34
【问题描述】：

我正在创建一些在我的网站中使用的图标字体规则。使用 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.13 中，试试这个解决方案：stackoverflow.com/questions/26111982/…
我相信这与这个问题有关：github.com/sass/libsass/issues/1115

标签： sass interpolation icon-fonts

【解决方案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"; 
}

【讨论】：

谢谢！那行得通。但我确实想知道是否存在允许反斜杠位于 $icons 变量之外的字符序列或函数。
@Ben 你真的需要将反斜杠分开吗？
@cimmanon 不，答案为我的问题提供了解决方案。我只是想知道技术方面。有没有办法在插入 sass 变量之前立即输出反斜杠？
@Ben in Sass 3.3 可以通过从字符串中切分反斜杠，然后将其与str-slice("\x",1,1) + $code 之类的任何代码组合来克服这个问题。在这里查看我的答案：stackoverflow.com/questions/21641833/…
该死，这看起来不再有效了。我正在生成带有奇怪字符而不是反斜杠的 CSS。

【解决方案2】：

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

【讨论】：

你的函数中有一个额外的右括号

【解决方案3】：

我通过弄乱插值来实现这一点

sassmesiter demo

// ----
// 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";
}

【讨论】：

对我来说最好的解决方案！
这对我很有效:) 内容：#{'"\\' + $unicode + '"'}

【解决方案4】：

如果您使用 Gulp 编译 Sass 文件，安装此 Gulp 插件可能是解决此问题的最简单方法：

https://www.npmjs.com/package/gulp-sass-unicode

var sass = require('gulp-sass');
var sassUnicode = require('gulp-sass-unicode');

gulp.task('sass', function(){
  gulp.src('style.scss')
    .pipe(sass())
    .pipe(sassUnicode()) // <-- This is the bit that does the magic
    .pipe(gulp.dest( "css/" ));
});

无需对您的 Sass 文件进行任何代码更改。写出你想要的 Sass 代码，然后将 unicode 字符自动解码回输出 CSS 中的常规转义字符串。

输入 SCSS

$testContent: "\f26e";

#test {
  content:  $testContent;
}

输出 CSS

#test {
  content: "\f26e";
}

【讨论】：

【解决方案5】：

不幸的是，这些解决方案并不完全适合我，但我终于能够使用SASS maps 使其工作

//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";
//}

【讨论】：

【解决方案6】：

使用取消引号和双斜杠

$var:123 → 内容："\e123"

 content:#{unquote('\"')+("\\")+("e")+$var+unquote('\"')};

【讨论】：