推荐使用css2less.com进行本地转换，避免上传敏感代码；转换后需手动修正URL引号、多选择器逗号及calc表达式包裹，并按功能分层管理变量与模块，PostCSS用于编译后类名替换。
直接用在线工具转完就扔进项目里，大概率第二天早上被测试拉进群问“按钮怎么全蓝了”。这不是转换失败，是跳过了人该干的活。
哪些在线工具能用、哪些必须绕开
css2less.com 是目前唯一推荐的浏览器端本地转换工具——它不上传代码，所有解析都在你电脑上完成。lessify.io、VS Code 插件 css-to-less 这类会把你的 CSS 发到后端服务器，敏感项目别碰。
- 粘贴前手动删掉
@import、@charset和 IE 条件注释（比如/*[if IE]*/），否则工具会报ParseError: unexpected token - 含
:not(.foo)、::before的选择器，工具大概率切错成函数调用，得人工核对 - 转换结果里的
@color-1、@width-2这类变量名全是随机生成，不能直接用
转换后必改的三处硬伤
工具只做缩进映射，以下几处不手动修，lessc 编译直接报错或样式错乱：
-
background: url(images/a.png)→ 必须改成background: url("images/a.png")（Less 要求 URL 加引号） -
.btn:hover, .btn:focus多选择器 → 工具常漏逗号，变成.btn { &:hover &:focus { } }（错误！），正确写法是.btn { &:hover, &:focus { } } -
calc(100% - 20px)→ 必须加~""包裹，写成width: calc(~"100% - 20px")，否则 Less 会尝试提前计算
变量和模块怎么分才不翻车
别把整份 CSS 塞进一个 style.less。真实项目要按职责分层，否则改个间距，整个导航栏边框跟着抖。
立即学习“前端免费学习笔记（深入）”；
- 只抽设计系统级常量：品牌色、断点值、字体栈，命名强制用
@name-type格式，比如@color-primary、@breakpoint-md - 组件内局部值（如
.card的阴影偏移）用lighten()、fade()动态算，不抽变量 - 目录结构按功能拆：
variables.less、mixins.less、base/reset.less、components/button.less，入口文件index.less只负责@import - 第三方 CSS（如 Ant Design）用
@import (inline) "antd.css"原样保留，别让它参与 Less 编译
PostCSS 是最后的兜底环节
Less 编译阶段没法用正则改类名，这是硬限制。真要批量替换 .v2- 为 .v3-，只能在 Less 输出 CSS 后再处理：
- 装插件：
npm install postcss postcss-replace-regex --save-dev - 配置
postcss.config.js，规则写成{ search: /\.v2-(\w+)/g, replace: '.v3-$1' } - 注意：它只操作最终 CSS 字符串，
content: "v2-text"不会被误伤，但也不能改@import路径或变量定义
最易被忽略的点：伪类嵌套歧义和命名空间冲突。比如 .btn:hover 被转成 .btn { &:hover { } } 看似没问题，但若后续加了 @ns: "myapp"; 并套用 @{ns}-btn，很容易生成 .myapp-btn.myapp-btn:hover 这种冗余选择器——这玩意儿不报错，但优先级会悄悄变高，覆盖逻辑就崩了。
