less伪元素content中无法直接使用变量，因编译期静态替换与运行时需求冲突；应改用data-属性+attr()或css类切换实现动态效果。
伪元素 content 中无法直接使用 Less 变量
Less 编译时变量会被静态替换，而 ::before 和 ::after 的 content 属性只接受字符串字面量、attr() 或计数器，不支持运行时插值——这意味着你写 content: "@{color}"; 会被当作纯文本编译，不是你想要的值。
常见错误现象是：变量名原样输出（如显示 @primary-color），或编译报错 ParseError: missing '}'（因未正确转义）。
- Less 的
@{var}插值仅在属性值上下文中生效，content里需配合引号和双花括号，但仍有局限 - 若变量是颜色、尺寸等非字符串类型，直接插值会丢失单位或格式（如
@{width}输出12而非12px） - 想让伪元素“感知” JS 动态值？Less 做不到——它纯编译期，必须换思路
用 data- 属性 + attr() 实现运行时传递
这是最可靠、兼容性好（IE9+）、且真正“动态”的方案：把变量值从 HTML 注入，CSS 用 attr() 读取。Less 只负责生成带 data- 属性的类名或规则，不碰伪元素内容本身。
例如，定义一个可复用的 mixin：
.with-icon(@text) {
&::before {
content: attr(data-icon);
}
&[data-icon="@{text}"] {}
}
然后在 HTML 中写：<div class="btn" data-icon="✓">Submit</div>，Less 编译后 CSS 就能正确渲染 ✓。
- 避免在 Less 中拼接
content: "~'@{text}'"—— 这只是字符串替换，无法响应 JS 修改 -
data-属性值要确保是合法字符串；含空格或引号需 HTML 编码（如data-icon=""OK""） - 如果变量来自主题配置（如
@success-icon: "✅"），可在 Less 中用data-icon="@{success-icon}"静态注入，但仍是编译期固化
JS 动态更新伪元素内容时，避开 Less 变量依赖
当需要根据状态实时改变伪元素文字（比如切换语言、暗色模式），Less 变量完全失效——必须由 JS 控制 data- 属性或 class 切换。
示例：用 JS 更新图标
element.setAttribute('data-icon', '⚠️');
// 或切换 class 触发不同 content
element.className = 'status-warning';
对应 CSS：
.status-warning::before { content: '⚠️'; }
.status-success::before { content: '✓'; }
- 不要试图用 JS 修改 style 标签里的 Less 变量——无效，Less 不提供运行时 API
- 若用 CSS 自定义属性（
--icon），注意content: var(--icon)在大多数浏览器仍不被支持（截至 2024，仅 Safari 支持） - 复杂场景（如图标字体 + 文本组合）建议统一用 inline SVG 或 icon font，比伪元素更可控
Less 编译期“模拟”动态：用循环生成多套伪元素规则
如果你有一组固定变量（如图标映射表），可用 Less 循环 + .each() 或 for 生成对应 class，每个 class 绑定不同 content 值。
例如：
@icons: "home": "?", "user": "?", "settings": "⚙️";
.each(@icons, {
.icon-@{key}::before {
content: @value;
}
});
编译后得到 .icon-home::before { content: "?"; } 等规则。
- 这仍是静态枚举，不能新增未预设的值
- 变量值必须是字符串字面量；函数调用（如
escape(@val)）在content中不可用 - 大量图标时生成 CSS 体积增大，注意 gzip 后影响
真正动态的伪元素内容，本质是 DOM 层的事——Less 只适合做编译期模板。别强求它处理运行时逻辑，否则要么绕大弯，要么掉坑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
