Less变量插值不能直接用于属性名
Less的@{variable}语法只支持在选择器、URL、字符串值中插值，**不能用来动态生成CSS属性名**（比如margin-@{side}）。这是初学者最常卡住的地方——写了半天编译报错，发现Less根本不认这种写法。
常见错误现象：ParseError: Unrecognised input 或属性名被原样输出成字面量（如margin-@{side}: 10px），浏览器直接忽略。
- 属性名必须是静态字符串，CSS规范本身不支持运行时拼接属性名
- Less编译阶段无法把插值结果“注入”到属性关键字位置，语法层面被禁止
- 想靠
@{prop}: @value动态赋值？无效。Less不解析左侧为插值表达式
用Mixin + 参数化实现等效效果
真正可行的替代方案是把“动态属性”逻辑封装进Mixin，用参数控制行为，让编译器提前展开所有组合。
使用场景：需要批量生成padding-top/padding-bottom、border-left-color这类带方向/状态后缀的规则。
立即学习“前端免费学习笔记（深入）”；
示例：生成四向内边距工具类
.pad(@side, @value) when (@side = top) {
padding-top: @value;
}
.pad(@side, @value) when (@side = right) {
padding-right: @value;
}
.pad(@side, @value) when (@side = bottom) {
padding-bottom: @value;
}
.pad(@side, @value) when (@side = left) {
padding-left: @value;
}
// 调用
.element {
.pad(top, 12px);
.pad(left, 24px);
}
- 每个
.pad()调用都会编译出对应的具体属性，无运行时开销 - 利用Guard条件匹配，避免冗余CSS输出
- 比纯变量插值更可控，也更容易加单位校验、默认值等逻辑
用循环生成多组属性（配合each()或for）
如果要批量生成大量类似规则（比如所有margin-*），用each()函数比手写Mixin更省事，但要注意Less版本兼容性。
Less 4.0+ 支持each()，旧版需用第三方插件或降级为.for()递归写法。
示例：生成全部方向的margin工具类
@sides: top, right, bottom, left;
each(@sides, {
.m@{key}(@value) {
margin-@{value}: @value;
}
});
// 编译后得到 .mt(), .mr(), .mb(), .ml() 四个Mixin
-
@{key}是数组索引（0,1,2,3），@{value}才是当前项（top/right…） - 别误用
@{key}去拼属性名——它不是字符串，不能当方向名用 - 循环生成的是Mixin名，不是CSS属性名；最终仍需调用才能产出真实CSS
为什么不用JavaScript运行时拼CSS？
有人想绕过Less限制，在JS里拼字符串然后document.styleSheets注入——这完全脱离了Less设计初衷，且带来严重问题：
- 丢失源码映射，DevTools里看不到原始Less变量和结构
- 无法参与CSS压缩、提取、按需加载等构建流程
- 样式优先级混乱，容易被其他CSS覆盖（JS注入默认是
<style></style>末尾） - 服务端渲染（SSR）场景下根本不可用
真正灵活的“动态”，是在编译期完成的确定性展开，不是运行时字符串拼接。Less的变量插值能力边界很清晰——它只负责把已知符号替换成已知值，不模拟CSS引擎。
