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

Less变量声明不易出错，因其必须用@前缀、先声明后使用，否则直接报错；同名变量按@import顺序覆盖，无静默失效；嵌套中变量限于当前块作用域，不污染全局。

因为Less的语法几乎就是CSS本身，你写过的每一行合法CSS，拿过去就能直接跑，不用改、不报错、不卡编译——这是它作为入门方案最硬的底气。

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。