less中波浪号~仅用于绕过转义，非字符串拼接操作符；选择器内拼接用.@{var}，属性值中用"@{var}"，~仅在需原样输出私有前缀等非常规场景使用。
Less 中不能用波浪号 ~ 拼接 CSS 字符串，它只用于“绕过转义”，不是字符串插值操作符。 试图写 ~"@{prefix}-btn" 期望生成类名是常见误解，实际结果往往出人意料甚至报错。
为什么 ~ 不是字符串拼接操作符
~ 的唯一作用是告诉 Less 编译器：“别处理里面的内容，原样输出”。它不解析变量、不执行拼接、不参与 CSS 值计算。比如 ~"hello @{name}" 会直接输出 hello @{name}（含未解析的 @{name}），而不是替换变量值。
-
~只接受单个字符串字面量（如~"abc"），不支持表达式或拼接语法 - 变量插值
@{var}必须出现在引号内，且整个字符串需为合法 Less 字符串上下文（如content: "@{prefix}-btn";） - 在选择器、
@keyframes名、@import路径等非属性值位置，@{var}本身就能直接拼接，无需~
在选择器中安全拼接类名（推荐方式）
Less 原生支持变量在选择器中的插值，这是最可靠、最常用的方式：
@prefix: "ui";
.@{prefix}-button {
color: blue;
}
编译后得到：.ui-button { color: blue; }。这种方式无兼容性问题，语义清晰，且支持嵌套上下文（如 &.@{prefix}-active）。
- 必须用
.@{var}、#@{var}或@{var}-suffix这类语法，不能加引号 - 变量值建议只含字母、数字、短横线；避免空格、斜杠或特殊符号，否则生成非法选择器
- 若变量来自函数返回（如
replace()），确保返回的是纯字符串，而非带引号的字符串
在属性值中拼接字符串（需引号 + 插值）
当需要生成带变量的 CSS 值（如 content、background-image URL、自定义属性值），直接在双/单引号内使用 @{var}：
@icon: "search";
.example::before {
content: "@{icon}";
background-image: url("/icons/@{icon}.svg");
}
注意：url() 内部的插值必须用双引号包裹整个路径（如 url("@{path}/@{file}")），否则 Less 会把 @{file} 当作独立 token 报错。
- 不要写
~"@{icon}"—— 它不会让变量生效，反而导致输出未解析的@{icon} - 如果变量值本身含引号或反斜杠，需手动转义，Less 不自动处理
- 复杂拼接（如条件组合）建议封装为 mixin，避免重复写长字符串表达式
哪些场景真要用 ~？仅限绕过转义
~ 的典型用途是输出浏览器私有前缀、CSS 函数调用或非法标识符（非常规需求）：
.hack {
filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
transform: ~"translate3d(0, 0, 0)";
}
这类写法本质是“逃逸”，和字符串拼接无关。现代项目中基本被 Autoprefixer 和标准语法取代，极少需要。
-
~后必须紧跟字符串字面量，不能接运算符、括号或分号 - 混用
~和@{var}（如~"@{x} @{y}"）会导致编译失败 - 一旦用了
~，就放弃了 Less 的类型检查和变量解析能力，调试困难
真正要拼接字符串时，记住：选择器里用 .@{var}，属性值里用 "@{var}"，其它地方优先考虑 mixin 封装逻辑 —— ~ 是应急出口，不是入门钥匙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
