less 3.0不支持将css属性名直接用作变量名，仅可通过~"@{prop}"实现属性名插值或使用mixin封装动态属性逻辑。
Less 3.0中不能直接用属性名当变量名
Less 3.0不支持把CSS属性（比如 color、margin）当作变量名来动态赋值或输出，这是常见误解。你写 @color: #ff0; 没问题，但想写 color: @color; 然后让 color 这个字符串本身变成变量——不行。Less变量是静态编译期替换，不是运行时反射。
用属性插值（Property Interpolation）间接实现
Less 3.0+ 支持通过 @{...} 语法做属性名插值，前提是这个插值内容必须是已定义的变量，且最终拼出合法CSS属性名。它不是“把属性当变量”，而是“用变量拼属性名”。
常见错误现象：@prop: "color"; @{prop}: #f00; → 编译失败，因为 @prop 是字符串字面量，Less 3.0默认不展开字符串变量做属性插值（需配合 ~"" 或函数封装）。
- 正确做法：用
~"@{prop}"强制转义为纯文本，再参与插值 - 示例：
@prop: "color"; ~"@{prop}": #f00;→ 输出color: #f00; - 注意：仅适用于单个属性；多个属性需重复写或封装为 mixin
更可靠的方式：用 mixin 封装动态属性逻辑
比起硬凑插值，用 mixin + 参数传入属性名和值，语义清晰、兼容性好、易复用。
使用场景：需要批量生成类似 border-color、background-color 的规则，或主题色映射。
- 定义：
.set-prop(@prop, @value) { ~"@{prop}": @value; } - 调用：
.set-prop(color, #333);→ 输出color: #333; - 参数差异：@prop 必须是带引号字符串（如
"font-size"），否则 Less 会尝试解析为变量名 - 性能影响：无额外开销，mixin 展开是编译时行为
容易踩的坑：引号、作用域与空格
属性插值对格式敏感，一个空格或引号缺失就导致编译失败或静默忽略。
-
~"@{prop} ": #f00;（末尾多空格）→ 输出color : #f00;（非法属性名） -
@prop: color;（没引号）→ Less 尝试读取变量@color，报variable @color is undefined - 嵌套作用域中变量未提升：在
&:hover块里定义@prop，外部无法访问，插值会失效 - 兼容性提示：Less 3.0 支持
~"@{...}"，但低于 3.0（如 2.x）不支持，会直接报错
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
