Less 不支持 @extend 和自动属性展开，应使用 mixin 复用样式；可用带条件判断的 mixin 模拟函数式调用；避免用嵌套 & 误造后代选择器；可借助 extract()/length() 做简单动态展开，复杂逻辑建议交由 PostCSS 处理。
Less 里没有 @extend，但可以用嵌套 + 继承模拟部分效果
Less 不支持 Sass 的 @extend 语法（即让一个选择器“继承”另一个选择器的样式），也没有原生的“属性展开”机制。所谓“CSS 属性展开”，比如 Sass 中 border: 1px solid #000; 自动展开为 border-width、border-style、border-color 三个声明——这其实是 CSS 解析行为，不是预处理器特性。Less 默认就按标准 CSS 规则解析和输出，不需要额外展开。
真正常被误认为“需要展开”的，是想复用一组声明（比如 display: flex; align-items: center; justify-content: space-between;），又不想写重复代码。这时应优先用 .mixin()：
.flex-center-between() {
display: flex;
align-items: center;
justify-content: space-between;
}
.header {
.flex-center-between();
}
用带参数的 mixin 模拟 Sass 的“展开式”函数调用
Sass 里有时会写 border(1px, solid, #333) 这类函数式调用，Less 本身不支持这种语法糖，但可以定义等效的 mixin：
常见错误是直接写 border: @a @b @c; 然后期望它自动拼成合法值——这行不通，因为 Less 不做运行时语法校验，拼错会直接输出无效 CSS（浏览器忽略）。
立即学习“前端免费学习笔记（深入）”；
正确做法是显式组合并加类型/逻辑防护（哪怕简单）：
.border(@width: 1px, @style: solid, @color: #000) when (isunit(@width, px) or isunit(@width, em)) {
border: @width @style @color;
}
-
when条件可防止传入border: auto none red这类非法组合被静默输出 - 如果真要支持多方向（如
border-top），得另写.border-top()或用 map 参数（Less 3.5+ 支持@args...） - 注意：Less 的
@args...是可变参数，不是解构赋值，不能像 Sass 那样border($props...)直接展开 map
避免用 & 嵌套模拟 @extend 导致选择器爆炸
有人尝试用嵌套加 & 实现类似 @extend 的复用效果，例如：
.btn {
padding: 8px 16px;
border-radius: 4px;
}
.btn-primary {
& { .btn(); }
background: blue;
}
这看似“继承”，但实际输出的是 .btn-primary .btn { ... }（后代选择器），完全不是预期效果。更糟的是，若在深层嵌套中使用，会生成冗长且低效的选择器链。
替代方案只有两个：
- 老老实实用
.btn, .btn-primary { ... }手动合并选择器（适合少量复用） - 用
.btn() { ... }mixin 多次调用（推荐，语义清晰、无副作用）
Less 的设计哲学是“输出可控”，它不隐藏选择器生成逻辑——这点和 Sass 不同，别试图绕过它去“骗编译器”。
用 extract() 和 length() 做有限的“动态展开”
Less 提供了基础列表操作函数，可用于构建轻量级展开逻辑，比如批量生成 margin 方向值：
.margins(@list) when (length(@list) = 4) {
margin-top: extract(@list, 1);
margin-right: extract(@list, 2);
margin-bottom: extract(@list, 3);
margin-left: extract(@list, 4);
}
.card {
.margins(12px, 16px, 8px, 16px);
}
这类写法适合固定长度的元组，但要注意：
-
extract()下标从 1 开始，不是 0；越界不报错，返回空值 → 可能输出margin-top: ;，导致 CSS 无效 - 无法做运行时类型判断（如区分
auto和12px），需靠注释或命名约定约束输入 - 性能无影响，但可读性下降，建议仅在组件库内部封装时使用，不暴露给业务层
真正需要复杂展开逻辑的场景（如响应式断点映射、主题色批量注入），应该交给 JS 工具链（PostCSS 插件）处理，而不是硬塞进 Less。
