Prettier --parser css 会重排嵌套规则顺序，将同级规则按字母或语义归类（如 .btn-* 提前、@media 移至末尾），因其仅静态分析最终CSS字符串，不理解Less源码嵌套意图；postcss-sorting 可能破坏媒体查询作用域，lessc --compress 会清除控制注释导致后续工具失效。
prettier --parser css 会重排嵌套规则顺序
Less 编译输出的 CSS 是线性流式结构，@media、@supports 块默认紧贴其上层选择器之后；而 prettier --parser css 会把所有同级规则按字母序或语义层级重新分组，比如把所有 .btn-* 提前，把 @media (min-width: 768px) 统一挪到文件末尾。这不是 bug，是 prettier 对 CSS 的“逻辑归类”策略——它不理解 Less 源码中嵌套的意图，只按最终 CSS 字符串做静态分析。
postcss-sorting 插件强制扁平化嵌套层级
如果你用了 postcss-sorting 并启用了 sort-order 配置（如按属性名排序），它会把 .card .header .title { font-size: 1rem; color: #333; } 拆成两行并重排属性顺序，但更危险的是：当它遇到嵌套媒体查询（如 @media (prefers-reduced-motion) { .card { animation: none; } }），可能把 .card 规则抽出来单独放，破坏原始作用域边界。结果就是 DevTools 里看到样式生效了，但响应式断点失效——因为 @media 块被移走后，内部规则变成全局作用。
lessc --compress + prettier 连用会丢失注释锚点
lessc --compress 会删掉所有换行和空格，包括 /* stylelint-disable */ 和 /* autoprefixer ignore next */ 这类控制注释；prettier 再格式化时，这些注释已不存在，无法指导后续工具行为。典型现象：你本想禁用某条 display: grid 的 autoprefixer 补前缀，结果注释被压缩抹掉，IE11 下整条声明静默失效。
- 检查构建流程中是否在
lessc后立即接--compress，应改为先输出未压缩 CSS，再交给 prettier 处理 - 所有关键控制注释必须用
/*! */包裹（如/*! autoprefixer ignore next */），才能逃过--compress清洗 - 若需保留嵌套语义，别依赖 prettier 归类，改用
postcss-nesting+ 原生 CSS Nesting 语法替代 Less 嵌套
VS Code 的 Less 格式化插件可能误解析 & 语法
部分编辑器插件（如 “Easy LESS”）对 & 的上下文识别不完整。例如写 .list { & > li { & > a { text-decoration: none; } } }，插件可能把第二个 & 错判为顶层，格式化后变成 .list > li > a 和 .list > li > a 重复两遍——表面看只是缩进错，实则是 AST 解析错误导致生成选择器重复。
真正容易被忽略的，是格式化工具从不校验编译逻辑正确性；它只处理字符串形态。哪怕你修复了所有 .mixin 漏括号问题，prettier 仍可能把 .modal { .close { .icon(); } } 编译出的 .modal .close .icon { } 错排成 .close .icon { } 单独一行——只要原始 CSS 字符串里有空行或换行位置异常，就可能触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
