如何在Sass中的字符串插值中使用单个反斜杠
我想用Unicode字符代码生成此CSS:如何在Sass中的字符串插值中使用单个反斜杠,sass,Sass,我想用Unicode字符代码生成此CSS: .foo::before { content: '\4556'; } 将单个(未缩放的)反斜杠(\)与代码(例如4556)连接起来 主要条件是,我不想提供已经在前面加了反斜杠的Unicode代码(例如,\4556),而是从一个整数生成它们。类似于下面的mixin: @mixin make-icon ($name, $code) { .#{$name}::before { content: '\#{$code}'; } } @in
.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'
,'\\\\$code}
,,'\\\\\\\\$code}'
,但都没有达到预期的效果
甚至尝试将slash定义为一个变量并对其进行插值,但这也没有帮助
您知道如何解决这个问题吗?在Sassv3.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";
}
不幸的是,@MartinTurjak解决方案并不完全适合我,但我终于能够让它与SASS地图一起工作了
//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";
//}
可能的重复不是重复,因为我的代码开头没有``。但这将是一个解决方案。然而,我很想知道如何解决这个问题。是的,这是一个复制品。事实上,您使用的是字符串,而另一个问题是使用数字,这不会改变任何事情。问题是一样的,解决办法也是一样的。主席先生,我的问题是不同的。导致问题的是斜杠字符。解决这个问题需要我在代码中加上斜杠。我不想那样。Martin Turjak的答案是正确的,不需要我在代码的开头添加斜杠。在Sass 3.4.13中,尝试解决方案:为什么你不把这个问题标记为重复,并提供原始非重复问题的答案?@cimmanon我想了一下。。。我得出的结论是,对另一个问题的回答为那里的具体问题提供了一个充分的解决方案。。。尽管讨论表明两张海报都想知道是否有一种方法可以在字符串插值中使用单个反斜杠,这是事实。不管怎样,我把问题改写了一点点。。。所以它更具体地问的是。。。我认为,这使其他人更容易找到重复的版本,而减少了重复的版本(但我认为这可能仍然是边缘;-)此示例适用于旧版本的sass,但目前最新版本(v3.4.13)不支持此工作。以下是一个问题,它解决了更高版本的问题: