quoted()和unquoted()仅作用于字符串字面量，不支持运行时计算结果；动态拼接应优先使用插值（@{...}），真正字符串操作需依赖Less 4.0+的JS函数。
quoted() 会加引号，unquoted() 会去引号，但它们不“转化”属性值
Less 中没有真正意义上的「把 CSS 值转成字符串」的运行时机制——quoted() 和 unquoted() 只作用于字符串字面量（literal），不是运行时计算结果。比如你写 @color: #333;，直接对它调用 quoted(@color) 不会得到 "#333"，而是报错或返回未定义行为。
常见错误现象：quoted(16px) 返回 "16px" 看似成功，但那是因为 16px 在 Less 解析阶段被当作带单位的数字字面量，而 quoted() 恰好接受这类输入并强制包裹双引号；但换成 quoted(lighten(#000, 20%)) 就会失败——函数调用结果不能被 quoted() 捕获。
-
quoted("hello")→"hello"（原样包双引号） -
quoted(hello)→"hello"（无引号标识符也被当字符串处理） -
unquoted("world")→world（去掉引号，输出裸文本） -
unquoted(world)→world（本来就没引号，无变化）
想拼接生成类名或 URL 路径？优先用插值 + quoted()
实际需求往往是：根据变量动态生成带引号的 CSS 值，比如 background-image: url("img/@{name}.png"); 或 class: "btn-@{size}";。这时候不该依赖 quoted() 转换，而该用插值（@{...}）配合原始字符串。
使用场景：构建 BEM 类名、动态图标路径、CSS 自定义属性 fallback 值。
立即学习“前端免费学习笔记（深入）”；
- 拼接类名：
.btn-@{size} { ... }，其中@size: large→ 输出.btn-large - 带引号的 URL：
url("img/@{icon}.svg")，@icon: close→url("img/close.svg") - 如果必须让变量内容被引号包裹（比如传给
content）：content: quoted("@{text}");，注意这里@{text}是插值，外层quoted()只是保险套壳，真正起作用的是插值本身
unquoted() 的典型误用：试图“去掉单位”或“转成标识符”
unquoted() 不是类型转换函数。它只在编译期把一个已知字符串字面量的引号剥掉，不会影响数值、颜色或计算结果的语义。
容易踩的坑：unquoted(16px) 看似返回 16px（没引号），但这个值仍被 Less 当作长度值参与计算；而 unquoted("16px") 才返回裸文本 16px，此时若用在需要数值的地方（如 width: unquoted("16px")）会导致编译错误。
- 正确用途：生成 CSS identifier，如
animation: @{name}-in;配合@name: unquoted(fade); - 错误用途：
width: unquoted(@width);（假设@width: 200px）→ 编译失败，因为unquoted(200px)不合法 - 替代方案：要“取纯数字”，用
unit(@value, "")；要“取单位”，用unit(@value)
真正需要运行时字符串操作？得靠 JavaScript 函数（Less 4.0+）
Less 4.0 开始支持通过 function 定义 JS 驱动的函数，才能实现基于计算结果的字符串构造。比如把颜色转成十六进制字符串、把数字转成带前缀的类名等。
性能与兼容性影响：JS 函数会增加编译时间，且无法在纯 CSS 环境（如某些在线编译器）中运行；生产环境建议预编译后发布 CSS，避免客户端解析。
- 示例（定义转小写函数）：
javascript<br>function toLowerCase(str) {<br> return str.value.toLowerCase();<br>}，然后在 Less 中调用toLowerCase("HELLO")→"hello" - 注意：JS 函数接收的是 Less AST 节点，需用
.value、.units等属性提取原始数据 - 多数项目没必要上 JS 函数——95% 的“字符串需求”其实靠插值和合理变量设计就能解决
最常被忽略的一点：Less 的字符串操作全发生在编译期，没有运行时上下文。所谓“转化”，本质是模板展开，不是数据类型转换。别试图用 quoted() 去捕获函数返回值或计算中间态，那条路走不通。
