在线工具转换的代码不能直接上线，需人工处理变量提取、伪类嵌套歧义、模块拆分等；它仅能粗粒度缩进转换并随机命名变量，无法识别设计系统常量、处理calc()包裹或正确解析复杂伪类。
直接用在线工具转出来的代码不能直接上线，必须人工过一遍——它不会自动提取变量、无法处理伪类嵌套歧义、更不会帮你拆模块。
在线工具能做什么、不能做什么
主流在线工具（如 CSS2LESS.NET、FISHSTICSS）本质是语法树粗粒度缩进转换：把 nav li a 套成嵌套块，把重复颜色值替换成 @color-1（但命名随机且无规律）。
- 能自动识别基础嵌套结构，生成带缩进的 Less 语法
- 对
:not(.foo)、::before这类含括号/冒号的伪类，大概率报ParseError: missing closing ')'或错切成函数调用 - 不会区分设计系统常量（如主题色）和组件临时值（如某个按钮的
border-color），全塞进 variables.less 导致后期无法精准替换 - 不处理
calc(100% - 20px)—— 缺少~""包裹会导致编译失败或计算错误
PostCSS 正则替换类名的实操路径
Less 编译阶段无法用正则改类名，这是硬限制。真正可靠的做法是：先让 Less 正常输出 CSS，再用 PostCSS 插件处理最终产物。
- 安装依赖：
npm install postcss postcss-replace-regex --save-dev - 在构建流程中加一步：Less →
.css→ PostCSS（启用postcss-replace-regex） - 配置示例（
postcss.config.js）：module.exports = { plugins: [ require('postcss-replace-regex')({ rules: [ { search: /\.v2-(\w+)/g, replace: '.v3-$1' }, { search: /#fff/g, replace: '@{color-white}' } // 注意：仅适用于纯字符串，不推荐用于颜色值替换 ] }) ] } - 关键限制：它只操作最终 CSS 字符串，所以
content: "v2-text"不会被误伤；但也不能修改@import路径或变量定义
变量与 Mixin 的手动介入点
工具转完只是起点，真正提升可维护性的动作都在人手干预环节：哪些该抽变量、哪些该封 Mixin、哪些必须加命名空间。
立即学习“前端免费学习笔记（深入）”；
- 颜色/间距/圆角等设计系统级值，统一提为
@color-primary、@spacing-md，命名强制用@name-type格式（如@color-text-secondary） - 组件专属逻辑（如按钮的 hover+focus+disabled 状态组合）不要硬写样式，改用
.button-states()Mixin 封装 - 所有类名前缀用变量控制：
@ns: "myapp"; .<code>@{ns}-button { ... }，构建时通过less.render({ math: 'always' })注入不同@ns值 - 避免在每个组件里
@import "variables"，改用@import (reference) "variables"防止重复输出
最易被忽略的是 calc() 和伪类兼容性——哪怕工具输出了嵌套结构，只要没给 calc 加 ~""，或者把 :nth-child(2n) 错写成 :nth-child(2n)（少了空格），Less 编译器就会直接报错停住。这些地方没法靠工具兜底，必须逐行扫。
