如何在 Sass 的字符串插值中使用单个反斜杠答案

【问题标题】：How to use a single backslash in string interpolation in Sass如何在 Sass 的字符串插值中使用单个反斜杠
【发布时间】：2014-02-08 04:18:26
【问题描述】：

我想用 Unicode 字符代码生成这个 CSS：

.foo::before {
  content: '\4556';
}

将单个（未转义的）反斜杠 (\) 与代码（例如 4556）连接起来。

主要条件是我不想提供已经以反斜杠开头的 Unicode 代码（例如\4556），而是从例如整数生成它们。就像在下面的 mixin 中一样：

@mixin make-icon ($name, $code) {
  .#{$name}::before {
    content: '\#{$code}';
  }
}

@include make-icon('foo','4556');

但是上面的 mixin 会返回这个 CSS：

.foo::before {
  content: '\#{$code}'; }

我试过'\\#{$code}'、'\##{$code}'、'/\#{$code}'、'\/#{$code}'、'\$code'、'\\##{$code}'，但都没有达到预期的效果。

甚至尝试将斜杠定义为变量并对其进行插值，但这也无济于事。

知道如何解决这个问题吗？

【问题讨论】：

Sass variable interpolation with backslash in output的可能重复
这不是那个的重复，因为我的代码开头没有 ``。但这将是一种解决方案。不过，我很想知道如何解决这个问题。
是的，它是重复的。您使用的是字符串而另一个问题是使用数字这一事实不会改变任何事情。问题一样，解决方法也一样。
先生，我的问题不同。它是导致问题的前导斜杠字符。该问题的解决方案需要我在代码中加上斜杠。我不想要那个。 Martin Turjak 的答案是正确的答案，不需要我在代码开头添加斜杠。
在 Sass 3.4.13 中，尝试那里的解决方案：stackoverflow.com/questions/26111982/…

标签： sass

【解决方案1】：

在 Sass v3.3 中，您可以通过使用新的 str-slice() 函数并执行以下操作来解决此问题：

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

@include make-icon('foo', 4556);

应该输出：

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

DEMO

【讨论】：

您为什么不直接标记以将此问题作为重复问题关闭并提供对原始非重复问题的答案？
@cimmanon 我已经考虑了一下......我得出的结论是，另一个问题的答案为那里的具体问题提供了充分的解决方案......虽然这是真的讨论表明，两位发帖者都想知道是否有一种方法可以在字符串插值中使用单个反斜杠。无论如何，我在这里稍微改写了这个问题......所以它更具体地询问那个......我认为，这使得其他人更有可能找到并且更少的重复（但我可能仍然是边缘;-)
此示例适用于旧版本的 sass，但目前的最新版本 (v3.4.13) 不支持此工作。这是一个针对更高版本解决问题的问题：stackoverflow.com/a/26112274/1203288

【解决方案2】：

不幸的是，@MartinTurjak 解决方案并不完全适合我，但我终于能够让它与 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";
//}

【讨论】：