如何在 Sass 中的字符串插值中使用单个反斜杠 [英] How to use a single backslash in string interpolation in Sass

问题描述

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

I want to generate this CSS with a Unicode character code:

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

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

Concatenating a single (unescaped) backslash (\) with the code (e.g. 4556).

主要条件是我不想提供已经带有反斜杠的 Unicode 代码(例如 \4556)，而是从整数生成它们.就像下面的混合:

With the main condition that I don't want to have to provide the Unicode codes already prepended with the backslash (e.g. \4556) but to generate them from an integer for example. Like in the following mixin:

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

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

但是上面的 mixin 返回了这个 CSS:

However the above mixin returns this CSS:

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

我试过 '\\#{$code}', '\##{$code}', '/\#{$code}', '\/#{$code}', '\$code', '\\##{$code}' 并且它们都没有给出想要的结果.

I've tried '\\#{$code}', '\##{$code}', '/\#{$code}', '\/#{$code}', '\$code', '\\##{$code}' and none of them gives the desired result.

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

Even tried defining slash as a variable and interpolate it but that didn't help either.

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

Any idea how to solve this?

推荐答案

在 Sass v3.3 中，您可以通过使用新的 str-slice() 功能和做这样的事情:

In Sass v3.3 you can get around this problem by using the new str-slice() function and doing something like this:

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

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

应该输出:

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

这篇关于如何在 Sass 中的字符串插值中使用单个反斜杠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！