unquote()仅在编译期移除带引号字符串的首尾引号，对无引号标识符无效；误用于unicode转义（如content: unquote("e901")）无法生成合法css token，正确方式是变量直接定义为\e901后插值。

unquote() 不是用来“处理原生 CSS 字符串”的，它只在 Sass 编译期起作用，且仅对带引号的字符串字面量生效——传入不带引号的标识符（如 Helvetica、e901）时，unquote() 根本不会运行，Sass 会直接报错或跳过。

为什么 unquote() 在伪元素 content 中常被误用？

很多人想用 unquote("e901") 把字符串变成 CSS 可识别的 Unicode 转义，但这是行不通的：

• CSS 的 content: \e901 是一个**词法单元（token）**，不是字符串；Sass 解析器在读到 \e901 时已将其识别为转义序列，根本不会当作字符串传给 unquote()
• unquote("e901") 输出仍是 e901（无反斜杠），浏览器当普通文本渲染，显示为字面字符，不是图标
• unquote("\e901") 会报错：Sass 不允许在字符串中写未转义的 Unicode 转义（\e901 在引号内会被解析失败）

unquote() 真实有效的使用场景

它只适合清理用户输入的配置字符串、拼接动态类名、或绕过某些工具对引号的强制包裹。典型用法：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 从 map 中取值后去掉多余引号：$font: map-get($fonts, "sans"); font-family: unquote($font);（当 $fonts 里存的是 "Helvetica" 这种带引号字符串时）
• 生成无引号的 CSS 自定义属性值：--theme-color: #{unquote($color)};，避免输出 --theme-color: "#333";
• 和 str-replace() 配合做字符串清洗（但注意：所有输入必须是引号包裹的字面量，如 str-replace(unquote("'foo'"), "'", "")）

处理图标编码的正确姿势

要让 content 正确显示图标，唯一可靠方式是变量插值，且变量值本身不能加引号：

• ✅ 正确：$icon-home: \e901; .home::before { content: #{$icon-home}; } → 编译为 content: \e901;
• ❌ 错误：$icon-home: "e901"; content: unquote($icon-home); → 输出 content: e901;（无反斜杠，无效）
• ❌ 错误：content: unquote("\e901"); → Sass 编译报错：Invalid CSS after "...": expected expression

真正需要动态拼接时，应先确保所有片段都是合法转义格式，再用 #{} 插值，而不是依赖 unquote() 去“修复”字符串。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！