less语言中，~有什么作用

Question

less语言中，~有什么作用，我看到iview组件库里面很多地方用到这种语法。
我查阅了一些资料，说是让浏览器自己去计算，而不是由打包工具计算。由浏览器自己计算有什么优势吗？

Answer 1

避免编译

 #main{
     width:~'calc(300px-30px)';
 }
    
/* 生成后的 CSS */
#main{
    width:calc(300px-30px);
}

 /* Less */
      @content:`"aaa".toUpperCase()`;
      #randomColor{
        @randomColor: ~"rgb(`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`)";
      }
      #wrap{
        width: ~"`Math.round(Math.random() * 100)`px";
        &:after{
            content:@content;
        }
        height: ~"`window.innerHeight`px";
        alert:~"`alert(1)`";
        #randomColor();
        background-color: @randomColor;
      }
      /* 生成后的 CSS */
    
      // 弹出 1
      #wrap{
        width: 随机值（0~100）px;
        height: 743px;//由电脑而异
        background: 随机颜色;
      }
      #wrap::after{
        content:"AAA";
      }

Answer 2

不清楚你说的波浪号具体出现在什么地方。

如果是 import 路径中带的，那么这不是 LESS 的语法，而是 webpack-loader 提供的路径别名机制。

如果是选择器中带的（形如 a ~ b { /* 一些样式 */ }），这也不是 LESS 中特有的，而是 CSS3 选择器之一，表示 A 元素后的所有同级 B 元素（即 A 的“弟弟” B 们）。

如果是表达式中带的，那么表示不由 LESS 计算编译出结果、而是保持原样输出。

Answer 3

webpack 提供了一种解析文件的高级机制。less-loader应用一个 Less 插件，并且将所有查询参数传递给 webpack resolver。 所以，你可以从node_modules导入你的 less 模块。 只要添加一个~前缀， 告诉 webpack 去查询模块。

详情看：webpack resolver