Less无if语句，用守卫混合模拟编译期条件匹配；无for循环，靠递归混合实现；不支持JS函数，内置函数有限且行为与JS不同；所有逻辑均在编译期展开为静态CSS。
Less里怎么写if逻辑
Less本身没有if语句，但可以用「条件混合（guarded mixins）」模拟。它不是运行时判断，而是在编译期根据参数值匹配规则——这点容易误解为JS的动态逻辑，结果调试时发现变量改了样式没变。
常见错误现象：.btn(@type) when (@type = primary) { color: blue; } 写完却没生效，多半是@type传入的是字符串"primary"（带引号），而守卫里写的是primary（无引号符号）。Less中符号和字符串不自动等价。
- 守卫里比较符号用
=，比较字符串得加引号：when (@type = "primary") - 多个条件用逗号分隔，表示“或”；用分号分隔，表示“且”
- 不支持嵌套
if-else if-else链，得靠多个同名混合+不同守卫覆盖
Less中循环怎么写（类似JS的for）
Less没有for，靠「递归混合」实现。本质是自己调自己，靠计数器递减+守卫终止，属于编译期展开，不是运行时迭代。
使用场景：批量生成响应式断点、z-index层级、颜色阶梯、CSS自定义属性变量集。
性能影响明显：10层递归会生成10段CSS；50层可能让Less编译卡顿甚至爆栈。别真拿它遍历数组。
- 必须设终止条件，比如
when (@i > 0)，否则无限递归导致编译失败 - 计数器要显式递减：
.loop(@i - 1)，不能写@i--（Less不支持自增运算符） - 参数传递要小心作用域——递归调用里用
@arguments转发所有参数更安全
Less里能用JS函数吗（比如Math.round()）
不能直接调用Math.round()这类JS函数。Less内置函数有限，round()、percentage()、unit()这些是它自己的，和JS无关。
容易踩的坑：看到文档里有color()就以为能传JS表达式，结果color("rgb(255, 0, 0)")可以，但color("rgb(" + 255 + ", 0, 0)")会报错——Less字符串拼接不支持+，得用~"rgb(@{r}, @{g}, @{b})"这种转义插值。
- 想用JS逻辑？得配Less插件（如
less-plugin-js），但会破坏纯CSS可预测性，团队协作时风险高 -
unit()和floor()返回值类型要留意：比如floor(3.7px)结果是3px，单位保留；但floor(3.7)是3（无单位） - 颜色函数如
lighten(@color, 10%)作用在HSL空间，和JS里RGB逐通道算亮度不是一回事
为什么Less的「逻辑」总不如JS灵活
因为Less是预处理器，不是运行时语言。所有所谓“逻辑”都在CSS生成前完成，输出就是静态CSS文本。你写的每个.loop(5)，最终编译出来就是5段固定规则，没有条件分支，也没有闭包捕获。
真正复杂的状态控制（比如根据用户偏好切换深色模式、实时计算容器宽度适配字体），该交给CSS Custom Properties + JS来做。Less只适合处理“构建时已知”的结构化重复。
最容易被忽略的一点：Less的变量和混合一旦定义，就无法在后续代码中重新赋值或修改——它没有JS那种可变绑定，只有单次求值。想“动态更新”，其实是换了一套变量重编译。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
