拉丁小字母急性SCSS

Question

我一直在尝试在mixin中使用这个字母。

@mixin btn($text, $color) {
cursor: pointer;
&:hover {
.text {
&::after {
content: $text;
}
}
}
}
.btnbitacora {
@include btn("Bit000E1cora", #00b8d4);
}

但是在浏览器中显示:

" bitcora& quot;，分割，我需要"Bitácora"

我放了一堆0因为如果我不放它们它会显示一个奇怪的符号()

当我在寻找关于这个主题的信息时，我发现了这个网站(https://r12a.github.io/app-conversion/)，我不知道这个网站是谁，但当我写同样的词时，它显示以同样的方式逃脱:

"钻头 00 e1 cora"

如果你能帮我一下，我会很感激的。

更新:

我认为我的项目发生了一些奇怪的事情，因为我确实在codependency上尝试了这些解决方案并且工作良好，我甚至在外部项目上尝试了相同的解决方案并且确实工作。

所以我想知道，到底发生了什么?

This is my package.json

devDependencies": {
"@babel/preset-react": "^7.0.0",
"@prettier/plugin-php": "^0.14.0",
"@types/react": "^17.0.1",
"browser-sync": "^2.26.7",
"browser-sync-webpack-plugin": "2.0.1",
"bulma": "^0.8.0",
"cross-env": "^5.1",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.13",
"prettier": "^2.0.4",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^8.0.0",
"ts-loader": "^8.0.1",
"typescript": "^4.1.3"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-solid-svg-icons": "^5.15.2",
"@fortawesome/react-fontawesome": "^0.1.14",
"@types/jest": "^26.0.20",
"@types/jquery": "^3.3.33",
"@types/jqueryui": "^1.12.10",
"@types/lodash": "^4.14.168",
"@types/node": "^14.14.25",
"@types/react-autosuggest": "^10.1.0",
"@types/react-dom": "^17.0.0",
"font-awesome": "^4.7.0",
"handlebars": "^4.7.3",
"jquery": "^3.4.1",
"jquery-ui": "^1.12.1",
"moment": "^2.24.0",
"react-autosuggest": "^10.1.0"
}

Answer 1

来自官方文档:

当解析未加引号的字符串时，转义的字面文本将作为字符串的一部分进行解析。例如，a被解析为字符、a和空格。但是，为了确保以相同的方式解析CSS中具有相同含义的未加引号的字符串，这些转义是规范化的。对于每个代码点，无论是转义还是未转义:

• 如果它是一个有效的标识符字符，它将不转义地包含在未加引号的字符串中。例如，1F46D返回未加引号的字符串👭。

• 如果它是换行符或制表符以外的可打印字符，则包含在。例如，21返回未加引号的字符串!

• 否则，小写Unicode转义包含在尾随空格中。例如，7Fx返回未加引号的字符串7Fx。

@include btn("BitE1 cora", #00b8d4);

可以正常工作并产生

.btnbitacora:hover .text::after {
content: "Bitácora";
}