如何在Sass中使用单个反斜杠进行字符串插值

Question

我想用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}'和他们没有给出期望的结果.

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

不知道怎么解决这个问题？

Answer 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