less中content属性仅支持字符串类型变量插值，数值、url等非字符串类型会因无隐式转换而报错或渲染为空；必须用e()函数预转字符串，且不可在content内运算或替代attr()。
Less 变量不能直接参与 content 属性的动态拼接，尤其涉及数字、颜色、URL 或运行时属性时，强行插值大概率编译失败或渲染异常。
为什么 content: "@{var}" 会报错或出空值
Less 编译器对 content 的插值极其严格：它只接受字符串字面量或已声明的字符串类型变量，不做隐式类型转换，也不允许在插值表达式里做运算。
-
@count: 5;→content: "@{count} items";报错：Operation on an invalid type（数值无法与字符串拼接） -
@icon: url("x.svg");→content: "@{icon}";渲染为字面字符串"url("x.svg")"，而非有效 CSS URL -
@label: "Save";→content: "@{label}";是唯一安全的直用场景
如何让数字、图标、多段文本安全进 content
核心原则：所有参与插值的值必须是字符串，且拼接动作必须在变量定义阶段完成，不能拖到 content 值内部。
- 数字转字符串：用
e("@{n}")强制输出无引号字符串，例如@n: 42; content: e("@{n} new"); - Unicode 图标：定义为带反斜杠的字符串变量，如
@check: "\2713"; content: "@{check} Done"; - 多段组合：拆成多个字符串变量再拼，避免用
+，例如@prefix: "Step"; @step: "3"; content: "@{prefix} @{step}:"; - 不要写
content: e("@{a}" + " " + "@{b}");—— Less 不支持字符串连接运算符
为什么不能用变量替代 attr(data-label)
attr() 是浏览器运行时执行的 CSS 函数，读取的是 DOM 元素上实时的 HTML 属性；而 Less 变量是编译期一次性替换，两者生命周期完全不重叠。
-
@dataVal: "Submit"; content: attr(@dataVal);→ 直接编译失败，attr()只接受字面量标识符（如data-label） - 正确做法是保留
content: attr(data-label);，靠 HTML 写data-label="Save"或 JS 动态更新属性 - 若需预设 fallback 文本，可用
content: attr(data-label, string, "Default");（CSS Level 3，注意浏览器兼容性）
真正容易被忽略的点是：你写的每一个 @var 都得提前想清楚它的类型和用途——content 不是万能接收器，它只认“纯字符串”，连 ~"" 这种旧语法都建议换成更明确的 e()。一旦混入计算、类型转换或运行时逻辑，就超出了 Less 的能力边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
