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

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

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

2 个答案:

DEMO