Less变量插值在::before和::after的content属性中有效但受限：仅字符串类型变量可安全插值，数值、颜色等非字符串类型会报错；必须用e()或预定义字符串变量拼接，不可在content内运算，且无法替代运行时的attr()函数。
Less变量插值在::before和::after的content属性中是否有效
有效，但有严格限制：只有字符串字面量或已定义的@variable（且必须是字符串类型）能被插值进content；数值、颜色、URL等非字符串类型会直接报错或渲染为空。
Less编译器对content里的插值非常敏感——它不执行类型转换，也不支持嵌套计算。比如@count + " items"若@count是数字，会因类型不匹配导致编译失败。
- ✅ 正确写法：
@label: "Save"; content: "@{label}"; - ❌ 错误写法：
@num: 5; content: "@{num} items";（编译报错：Operation on an invalid type） - ⚠️ 隐患写法：
@icon: url("x.svg"); content: "@{icon}";（输出为content: "url("x.svg")";，变成字符串而非实际URL）
如何安全地拼接动态content文本（含数字、图标符号等）
核心思路是：所有参与插值的变量必须提前转为字符串，且避免在content内做运算。推荐用e()函数包裹或预定义带格式的字符串变量。
- 处理数字：用
~"@{n}"或e("@{n}")强制转字符串，例如@n: 42; content: e("@{n} new"); - 插入Unicode图标：定义为字符串变量，如
@check: "\2713"; content: "@{check} Done"; - 组合多段文本：拆成多个独立变量再拼接，避免在
content里用+，例如@prefix: "Step"; @step: "3"; content: "@{prefix} @{step}:";
注意：e()只是移除引号包裹，不改变内容语义；~"..."是旧语法，新项目建议统一用e()。
立即学习“前端免费学习笔记（深入）”；
为什么content: attr(data-label)不能用变量替代
attr()是运行时CSS函数，由浏览器在渲染时读取DOM属性；而Less变量是编译期替换。二者生命周期完全错开——你无法用Less变量“模拟”或“覆盖”attr()行为。
- ❌ 错误假设：
@dataVal: "Submit"; content: attr(@dataVal);→ 编译直接失败，attr()只接受字面量标识符 - ✅ 正确做法：保持
content: attr(data-label);，在HTML中动态写data-label="Save"，或配合JS更新属性 - ? 折中方案：用Less生成多组预设规则，例如
.btn--save::after { content: "Save"; }，适用于有限固定值场景
编译后CSS体积与维护风险提示
过度依赖变量插值生成content会导致CSS膨胀——每个不同值都会产出独立CSS规则（Less无法合并content不同的选择器）。更隐蔽的问题是：这类样式无法被CSS-in-JS或原子化工具识别，调试时容易误判来源。
真正需要动态内容的地方，优先交给data-*属性 + attr()，或用JS注入文本；Less变量插值只适合构建阶段就确定、且变化频率极低的文案（如版本号、固定状态标签）。
