Less中~""转义失败的根本原因是其内部混入未处理的变量插值或非法字符，因~""仅原样输出、不解析变量、不转义Unicode、不校验语法；常见错误包括误写未引号Unicode、错位引号、嵌套运算及构建链路中less-loader与postcss-loader顺序不当。
Less里~""转义后CSS内容为空或乱码
根本原因是转义字符串里混入了未被正确处理的变量插值或非法字符。Less对~""内的内容只做原样输出，不解析变量、不转义Unicode、不校验语法——它信你写的每字都合法。
常见现象是content: ~"e901"编译后变成content: ""，或者clip-path: ~"circle(@{r} at 50% 50%)"直接报错。这不是Less bug，是你把不该放进去的东西塞进了转义壳里。
-
~""里不能直接写未加引号的Unicode：写~"e901"会失败，必须写~'"\e901"'（外层单引号+双引号包裹+反斜杠转义） - 变量插值必须用
@{var}，且整个表达式仍需包在~""中：width: ~"calc(100% - @{gutter}px)"✔️；width: calc(~"100% - " @gutter "px")❌ - 零宽空格（U+200B）、BOM头、软连字符（U+00AD）一旦混进
~""内部，Less直接静默丢弃整段——VS Code开“显示不可见字符”再检查
min()、max()、clamp()等CSS函数在Less中报“undefined function”
Less解析器看到min(430px, 100%)，第一反应是“这该是个Less函数”，然后查表没找到定义，就抛undefined function min错误。它根本不等你写完括号，词法分析阶段就卡住了。
修复不是加@function min，而是让Less彻底放弃解析意图。
立即学习“前端免费学习笔记（深入）”；
- 所有CSS内置函数都必须用
~""包裹：width: ~"min(430px, 100%)" - 含变量时，只插值变量本身，别动函数结构：
@size: 430px; width: ~"min(@{size}, 100%)"✔️；width: ~"min("@size", 100%)"❌（引号错位） - 不要试图在
~""里嵌套Less运算：~"min(@{w} + 10px, 100%)"会失败——先算好值：@w10: (@w + 10px); width: ~"min(@{w10}, 100%)"
Webpack中less-loader配置导致~""失效
不是代码写错了，是构建链路把转义吃掉了。典型表现：本地npx lessc编译正常，Webpack打包后~"calc(...)”变成空字符串或原始calc(...)被Less提前计算。
问题出在less-loader和postcss-loader的协作关系上——如果postcss-loader插在less-loader之前，它会把~""当普通字符串传给Less，而Less还没来得及处理就被PostCSS改写了。
- 确保
less-loader在postcss-loader之前（顺序：css-loader → postcss-loader → less-loader） - 检查
less-loader是否启用了javascriptEnabled: true——该选项会干扰~""行为，应设为false（默认值） - 若用Vite，确认
preprocessorOptions.less.javascriptEnabled未被手动设为true
IE11下~""输出的grid或gap样式完全不生效
~""只是绕过Less解析，不解决浏览器兼容性。它把display: grid原样吐给IE11，而IE11根本不认识这个声明——连报错都不会有，直接忽略整条规则。
这时候转义不是解药，是障眼法。你得判断：这是想“让旧浏览器也跑起来”，还是“只保证现代浏览器不出错”。
- 明确不支持IE的项目：删掉
~""，直接写display: grid，靠Autoprefixer和browserslist兜底（但注意Autoprefixer不降级grid） - 必须支持IE11：放弃
~"display: grid"，改用display: -ms-grid+-ms-grid-columns等专用属性，这些不能靠转义生成，得手写 -
gap同理：~"gap: 12px"在IE里等于没写，必须用margin模拟，比如封装.grid-gap(@s) { > *:not(:last-child) { margin-right: @s; } }
转义不是万能胶，它是把控制权从Less手里抢回来的开关。开得对，CSS函数、Unicode字符、复杂calc都能稳稳落地；开得随意，空内容、乱码、IE白屏就会接踵而至。真正难的从来不是怎么写~""，而是想清楚：这一行，到底该由谁来负责最终渲染。
