为什么Less是CSS预处理器入门首选？

为什么建议在CSS预处理器中优先选择Less作为入门方案？

说到CSS预处理器的入门选择，其实有个很实在的判断标准：你写过的每一行合法CSS，拿过去能不能直接跑、不用改、不报错、不卡编译？Less恰恰满足这一点，这也是它作为入门方案最硬的底气。

Less变量声明和使用为什么不容易出错？

Less用@开头定义变量，比如@primary-color: #1890ff;，所有变量都是就近作用域+顺序执行，没有Sass那种!default机制，也没有模块隔离。这意味着什么？

• 变量必须先声明后使用，否则编译直接报ParseError: variable @xxx is undefined——这就像你写代码忘了声明变量，编译器会直接告诉你，而不是等到运行时才出问题。
• 同名变量在不同@import文件中会被后导入的覆盖，但不会静默失效——你能立刻看到颜色变了，而不是等上线才发现主题错乱。
• 不支持嵌套作用域，所以.box { @size: 12px; width: @size; }里的@size只在.box块内有效，不会污染全局——这其实是个好事，减少了变量泄漏的风险。

嵌套规则在Less里为什么更“可控”？

嵌套不是“能嵌多深就嵌多深”，Less对解析层级有明确限制：不支持无父选择器的纯块级嵌套（比如直接写& { color: red; }），也不允许@media内部再嵌套超过两层选择器。常见报错类型包括：

• ParseError: Unexpected token——大概率是&:hover { &::before { ... } }这种双重&嵌套，而外层没绑定具体选择器。
• 嵌套过深导致编译器递归溢出，表现为Recursive call to mixin，尤其在递归.mixin里没设终止条件时。
• @import路径含中文或空格，Less会静默失败，只提示末尾缺失}，实际是路径解析失败——这需要你留意路径命名规范。

Vue项目里用lang="less"为什么比Sass更稳？

vue-loader默认内置less-loader，装完less和less-loader就能跑，不需要额外配node-sass或dart-sass。实操中能明显感受到：

• Windows下node-sass常因Python或C++构建工具缺失而编译失败，中断HMR；Less没这问题。
• @mixin不强制带括号，.clearfix比@include clearfix()少两个字符，适合快速写样式。
• 但要注意：@import是全局合并，每次引入都在悄悄改写变量表——你写的第10个@import可能已经把@primary-color覆盖成#ff0000了，而你根本没意识到。

真正容易被忽略的是：Less不报错的地方，往往才是坑。比如.mixin参数缺失时，它不会警告，只是输出空CSS；@import路径错误时，它不提示404，只让后续样式消失——这些“安静的失败”，需要你习惯性检查编译输出和浏览器开发者工具里的最终CSS。