SASS在Unicode内容前加反斜杠(\) [英] SASS is prepending unicode content with backslash (\)
问题描述
我正在尝试在编译* .scss文件后产生一些Unicode字符.
I'm trying to produce some unicode characters after compiling my *.scss file.
例如,我有以下(SCSS):
As an example, I have the following (SCSS):
.element:after {
content: "\a0";
}
在编译文件时,它输出以下(CSS):
When the file is compiled, it outputs the following (CSS):
.element:after {
content: "\\a0";
}
注意多余的反斜杠(\).
我确实在此处尝试了该解决方案: Sass:Unicode转义未保存在.css文件中,这建议引入以下功能:
I did try the solution here: Sass: unicode escape is not preserved in .css file, which suggests introducing the following function:
@function unicode($str) {
@return unquote("\"")+unquote(str-insert($str, "\\", 1))+unquote("\"")
}
并像这样(SCSS)使用它:
And using it like so (SCSS):
.element:after {
content: unicode("a0");
}
但是,这会产生以下(CSS)
However, this produces the following (CSS)
.element:after {
content: "\\" ")+unquote(str-insert($str, " \\\\ ", 1))+unquote(" \\ "";
}
注意,它甚至没有按预期调用功能.为什么会这样?
我正在Maven中使用这些库:
I'm using these libraries in Maven:
<dependency>
<groupId>net.jawr</groupId>
<artifactId>jawr-core</artifactId>
<version>3.9</version>
</dependency>
<dependency>
<groupId>net.jawr.extensions</groupId>
<artifactId>jawr-spring-extension</artifactId>
<version>3.9</version>
</dependency>
<dependency>
<groupId>com.darrinholst</groupId>
<artifactId>sass-java-gems</artifactId>
<version>3.4.20.0</version>
</dependency>
<dependency>
<groupId>org.jruby</groupId>
<artifactId>jruby-core</artifactId>
<version>9.1.5.0</version>
</dependency>
<dependency>
<groupId>org.jruby</groupId>
<artifactId>jruby-stdlib</artifactId>
<version>9.1.5.0</version>
</dependency>
临时解决方案
请勿在SCSS中使用unicode.而是在HTML中使用Font Awesome(在CSS文件中保留Font Awesome).
Temporary solution
Don't use unicodes in SCSS. Instead, use Font Awesome in the HTML (keeping Font Awesome in a CSS file).
推荐答案
在尝试使用自定义图标字体时,我遇到了同样的问题.我发现的解决方案是创建一个看起来像这样的mixin:
I had the same issue while trying to use a custom icons font. The solution I found is creating a mixin which looks like this :
@mixin class-for-icon($name, $code) {
.icon-#{$name}::before {
content: unquote("\"\\#{$code}\"");
}
}
然后我可以像这样使用它:
And then I can use it like this :
@include class-for-icon('myIcon', 'e1ff');
/* generates */
.icon-myIcon::before {
content: "\e1ff";
}
我使用node-sass 4.5.3将sass文件编译为css,并且运行良好(当前在一些项目的生产环境中使用它)
I use node-sass 4.5.3 to compile my sass files into css, and this is working well (currently using it in production on a few projects)
希望这会有所帮助!
这篇关于SASS在Unicode内容前加反斜杠(\)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!