LESS中波浪线符号是否已取代e函数？用法咨询

嘿，我来帮你搞定这个问题！你遇到的问题大概率是波浪线的用法搞错了——它不是函数调用（比如~(xxx)这种写法是错的），而是一种字符串转义语法，正确格式是~"需要转义的内容"。

先明确核心区别 #

LESS文档里说的波浪线替代e()，是指：

• 旧写法（e函数）：e("calc(100% - 20px)")
• 新写法（波浪线语法）：~"calc(100% - 20px)"

两者的功能完全一致：让LESS直接输出引号里的内容，不进行编译解析。你之前用~()导致失效，就是因为把它当成了函数来调用，实际上波浪线只需要直接包裹字符串就行。

举几个实际场景的例子 #

1. 处理CSS calc表达式

   // e函数写法
   .box { width: e("calc(100% - 40px)"); }
   // 波浪线写法
   .box { width: ~"calc(100% - 40px)"; }
   // 编译后都得到：.box { width: calc(100% - 40px); }
   

2. 引用CSS自定义属性

   // e函数写法
   .text { color: e("var(--primary-color)"); }
   // 波浪线写法
   .text { color: ~"var(--primary-color)"; }
   // 编译后都得到：.text { color: var(--primary-color); }
   

3. 特殊选择器或语法
   比如要输出::-webkit-scrollbar这种伪元素：

   // e函数写法
   @scrollbar: e("::-webkit-scrollbar");
   @{scrollbar} { width: 8px; }
   // 波浪线写法
   @scrollbar: ~"::-webkit-scrollbar";
   @{scrollbar} { width: 8px; }
   

为什么e()还能正常工作？ #

LESS为了向后兼容，并没有移除e函数，只是官方更推荐简洁的波浪线语法而已。所以你现在用e()依然有效，但换成波浪线写法（注意是~""不是~()）就能实现完全一样的转义效果。

内容的提问来源于stack exchange，提问作者James