Less中@{var}在伪元素content里常失效，因content只接受字符串字面量、attr()或计数器，不支持运行时插值；@{var}是编译期替换，若变量非字符串、未加引号或上下文干扰，会导致未展开或报错。
Less 中 @{var} 插值在伪元素里为什么经常失效
因为 content 属性只接受字符串字面量、attr() 或计数器，不支持运行时插值。Less 的 @{var} 是编译期替换，但若没配合引号或上下文，就会被当作文本原样输出——比如写 content: "@{icon}";，结果可能是 content: "@icon";（变量名未展开），或直接报错 ParseError: missing '}'。
伪元素 content 中正确使用 @{var} 的三个前提
必须同时满足以下三点，插值才能被正确识别并展开：
- 变量本身是字符串类型（如
@icon: "✓";），非数字/颜色/尺寸；否则需手动加引号或用~""转义 -
@{var}必须出现在带引号的字符串内部，例如content: "@{icon}";，不能写成content: @{icon}; - 整个字符串不能被其他 Less 语法干扰，比如嵌套中误用了
&或混入未闭合的大括号
处理非字符串变量（如颜色、尺寸）进 content 的替代方案
Less 不允许把 @primary-color 这类变量直接塞进 content，因为编译后会丢单位或格式（比如输出 rgb(77, 146, 111) 而不是你想要的十六进制）。可行做法包括：
- 提前定义好字符串化版本：
@primary-color-str: "#4D926F"; content: "@{primary-color-str}"; - 用
~""转义 + 字符串拼接（仅限简单场景）：content: ~"'@{prefix}-item'"; - 放弃在
content里动态传值，改用attr(data-icon)+ HTML 属性驱动，更可控也利于可访问性
批量生成带不同 content 的伪元素，推荐用映射（Maps）+ 循环（.each）
重复写多个 ::before 规则很冗余，用 Less 的 #map() 和 .each() 混入能一次生成多组：
#icons() {
check: "✓";
cross: "✗";
info: "ℹ";
}
.each(#icons, {
.icon-@{key}::before {
content: "@{value}";
}
});
这样比手写三段规则更安全，也避免了单个插值出错导致整块编译失败。注意：该写法要求 Less ≥ 3.5，旧版本需降级为手动展开或用 JavaScript 插件预处理。
真正难的不是写对一行 @{var}，而是意识到 content 天然不适合承载动态样式逻辑——它本质是装饰性文本，一旦需要条件判断、状态联动或用户输入响应，就应该让渡给 JS 或 data 属性驱动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
