less中带连字符或数字开头的css属性必须用单/双引号包裹，如"-webkit-line-clamp"；变量声明也需带引号，使用时配合@{}插值，如@{@prop}: 2；#{...}和字符串拼接在属性名位置无效。
Less里怎么写带连字符或数字开头的CSS属性？
Less编译器会把 -webkit-line-clamp、grid-area 这类含连字符的属性名，当成减法运算或非法标识符直接报错。根本原因不是CSS不支持，而是Less解析器在遇到 - 时默认尝试做数学计算。
- 必须用引号包裹整个属性名：
"-webkit-line-clamp"，而不是只包值或部分 - 数字开头的属性（如
3d-transform）同样适用该规则，"3d-transform"才能通过编译 - 注意引号类型：单引号、双引号均可，但不能用反引号（
`），否则Less会当作插值语法处理
变量值里含特殊符号的属性名怎么安全赋值？
如果想用变量动态生成这类属性，不能直接写 @prop: -webkit-line-clamp; —— Less会把它解析成负数 -webkit 减去变量 line-clamp，直接报 Variable @line-clamp is undefined 错误。
- 变量声明时就得带引号：
@prop: "-webkit-line-clamp"; - 使用时仍需引号包裹：
@{@prop}: 2;（注意@{}插值语法必须配合引号变量） - 别漏掉插值花括号，写成
@prop: 2;会被当作文本字面量，无法生成有效CSS
为什么用 #{...} 或字符串拼接会失败？
有人试过用插值 #{'-webkit-line-clamp'} 或拼接 "-webkit" + "-line-clamp"，结果编译出的CSS是空的或语法错误。因为Less的插值只在值（value）上下文中生效，属性名（property）位置不支持运行时拼接。
-
#{...}只能在值的位置展开，比如content: #{'foo'};合法，但#{'width'}: 100px;不合法 - 字符串拼接在属性名位置会被忽略或报错，Less不支持属性名的动态构造
- 唯一可靠方式就是硬编码引号属性名，或用已声明的带引号变量配合
@{}
兼容性与维护提醒
引号写法虽然解决编译问题，但会让Less代码看起来像字符串而非原生CSS，团队成员可能误以为是注释或无效代码。更隐蔽的问题是：某些IDE的Less语法高亮和自动补全对引号属性支持不好，容易漏掉引号或配对错误。
实际项目中，如果大量使用 -webkit- 前缀，建议抽成 mixin 封装，比如 .line-clamp(@lines) { "-webkit-line-clamp": @lines; }，既避免重复引号，也方便后续统一替换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
