less中~转义仅对url()和@import url()内的纯字符串生效，要求~紧贴引号、无空格、无变量插值、无bom，否则原样输出或报错。
Less里转义失败，八成不是写法错，而是你误把~当万能胶水——它只对字符串字面量生效，且不兼容变量、空格、BOM、路径解析等常见干扰项。
为什么~"xxx"编译后还是原样输出
~"xxx"本意是让Less跳过解析、原样输出，但若它出现在不该出现的位置，就会失效甚至报错。
- 字符串外多写了空格：
~ "xxx"❌（~必须紧贴引号） - 混用变量插值：
~"@{url}"❌（~不支持变量，只能接纯字符串） - 文件含UTF-8 BOM：BOM会卡在
~"前面，导致Less根本没识别到转义标记 - 用在
@import非URL场景：@import ~"vars.less"❌（~只对url()和@import url()有效，普通@import要靠~@/或paths）
url(~"...")和@import url(~"...")必须这么写
这是~唯一被官方保证支持的两个位置，但细节极易翻车：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
url(~"https://fonts.googleapis.com/...")✅ -
@import url(~"https://cdn.example.com/style.css")✅ -
url( ~"..." )❌（括号内不能有空格） -
@import ~"https://..."❌（缺url()包裹，会被当本地路径） -
background: url(~"./img.png")❌（相对路径用~无意义，应改用~@/assets/img.png或resolve-url-loader）
想透传CSS hack或特殊语法？别硬套~
~"..."只做字面量透传，不参与任何Less语义。比如写content: ~"^//* hack"，输出就是content: ^//* hack——浏览器根本不认这个语法，也不会报错，只是静默忽略。
- 真正需要CSS运行时行为的，该用
calc()、attr()或var() - 要兼容IE的
filter等老属性，应交由autoprefixer处理，而非手写~"filter: progid:..." -
content里含双引号：用单引号包裹整个值，如content: '"Hello"';，比~"\"Hello\""更稳
VS Code里看不见的字符正在破坏~
复制粘贴来的代码常带零宽空格（U+200B）、软连字符（U+00AD）或BOM，它们会插在~和"之间，让Less解析器完全失焦。
- VS Code开启“显示不可见字符”（Ctrl+Shift+P → Toggle Render Whitespace）
- 检查
~"前是否有多余符号，尤其是~"这种带U+200B的组合 - 终端执行
xxd style.less | head -n 5，确认首字节不是ef bb bf（BOM）
最常被忽略的一点：~不是语法糖，它是编译器层面的逃生舱门——开错了方向，只会把你送到更混乱的地方。它不解决路径、编码、作用域或兼容性问题，只负责“别动这个字符串”。真要解决问题，得回到@import策略、构建链路或CSS本身的设计上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
