unquote()仅移除字符串两端引号，不能输出完整css声明；它适用于字体名、url等需保留原始格式的属性值，配合#{}插值使用，但不可用于属性名或含冒号的非法标识符。
string.unquote 不能输出原生 CSS 属性
string.unquote() 的作用只是移除字符串两端的引号，它不会让 SCSS 编译器“跳过编译”或“输出原生 CSS”。很多人误以为用它包裹 color: red 就能直接输出未加引号的 CSS 值，但实际结果是：SCSS 仍会尝试解析该内容——如果里面含冒号、分号或非法标识符，就会报错，比如 Invalid CSS after "color": expected expression。
想输出带冒号的原生 CSS 值，得用插值 + unquote 组合
真正可行的方式是：把整个声明写成字符串，用 string.unquote() 去引号，再通过 #{} 插值注入到属性值位置。注意——它只能用于**属性值部分**，不能用于属性名或完整声明行。
-
$val: string.unquote("red");→ 输出red（合法，可赋给color） -
$val: string.unquote("color: red");→ 编译失败（SCSS 不允许属性声明作为值） - 正确姿势：
color: #{string.unquote("red")};→ 输出color: red; - 错误姿势：
#{string.unquote("color: red")};→ 语法错误，顶层插值不被允许
更安全的替代方案：用 @if 或 map-get 动态取值
如果你的真实需求是“根据变量条件输出不同 CSS 值”，硬塞字符串反而增加维护成本和出错概率。SCSS 原生支持逻辑和数据结构：
- 用
map-get($colors, "primary")比string.unquote(map-get($strings, "primary-color"))更可靠 - 需要动态生成属性？优先考虑
@each遍历 map，而不是拼接字符串 - 真要绕过编译（比如输出
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);），用#{""}插值最稳妥，但必须确保内容不含 SCSS 特殊字符
string.unquote 在字体名、URL 等场景才真正有用
它的典型用途是处理带空格的字体名或需保留原始格式的 URL：
-
font-family: #{string.unquote("'Helvetica Neue', Arial, sans-serif")};→ 正确输出引号包裹的字体列表 -
background-image: url(#{string.unquote("data:image/svg+xml;utf8,<svg>...</svg>")});→ 避免 URL 中括号被误解析 - 但注意：现代构建工具（如 Vite、Webpack）对 data URL 支持更好，直接写字符串通常更清晰
真正容易被忽略的是：SCSS 的字符串操作永远发生在编译期，它不生成运行时 JS 字符串；一旦你开始频繁依赖 string.unquote + 插值来模拟 CSS 声明，说明抽象层级可能出了问题——这时候该检查变量设计，而不是拼字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
