less 不支持变量拼接生成属性名，因编译时属性名须为静态 css token；应使用带条件分支的 mixin 封装逻辑，如 .set-spacing(@side, @value)；插值 ~"@{var}" 仅适用于选择器或属性值，不可用于冒号左侧；大量动态属性宜用构建脚本、postcss 或 css 自定义属性实现。
Less 里不能直接用变量拼接生成属性名
Less 编译时是静态解析的，@variable 只能用于属性值、选择器、URL 等上下文，但**不能作为 CSS 属性名本身被动态拼接**。比如写 @prefix: margin; @{prefix}-top: 10px; 是非法语法，Less 会报错 ParseError: expected '}' got '-' 。
这是因为属性名必须在编译前就确定为合法的 CSS token，而拼接后的结果（如 margin-top）在 Less 解析阶段尚未“成型”，引擎无法识别它是一个完整属性。
用 mixin + 参数解耦是最可靠的方式
把“动态属性名”转化为“可复用的行为逻辑”，用 mixin 封装常见组合，通过参数控制具体行为：
.set-spacing(@side, @value) when (@side = top) {
margin-top: @value;
}
.set-spacing(@side, @value) when (@side = right) {
margin-right: @value;
}
.set-spacing(@side, @value) when (@side = bottom) {
margin-bottom: @value;
}
.set-spacing(@side, @value) when (@side = left) {
margin-left: @value;
}
.example {
.set-spacing(top, 12px);
}
这种写法明确、可读性强，也支持条件分支和默认值。如果需要支持 padding，再加一组同名 mixin 即可，不依赖字符串拼接。
用 ~"" 插值强行拼接仅限于选择器或值，不适用于属性名
Less 的插值语法 ~"@{var}" 只能在以下位置生效：
- 选择器内部（如
.@{name} { ... }） - 属性值中（如
content: ~"'@{text}'";） - URL 或
@import路径
但它**不能出现在冒号左边**。下面这段代码会直接编译失败：
@prop: "margin-top";
.@{prop}: 10px; // ❌ Syntax Error
即使改写成 ~"@{prop}": 10px 也不行 —— Less 不允许插值出现在属性声明的位置，这是语法硬限制。
真要动态生成大量属性？考虑构建时预处理或换用 PostCSS
如果你的场景是“根据配置表批量生成 margin-*、padding-*、border-* 等变体”，Less 并不适合做这类元编程。此时更务实的做法是：
- 用 JavaScript 脚本生成一份静态 Less 文件（例如遍历方向数组，输出对应 mixin）
- 迁移到 PostCSS +
postcss-custom-properties或postcss-nested，配合 JS 逻辑动态构造规则 - 在现代项目中，直接用 CSS 自定义属性 + JS 控制，反而更灵活可控
Less 的设计目标是增强可维护性，不是替代编程语言。越试图用它做运行时式拼接，越容易卡在语法边界上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
