body{top:~`Math.random()*100+'px'`;}本文主要记录我在日常工作中用到的一些lesstips1.组件库主题定制一般组件库样式编写都会为用户设计一些主题样式替换方案，我这里根据自己的主流组件库antd和iview的研究归纳起来就是这两类：iview引入主题样式，重写@import'~iview/src/styles/index.less';//这里要覆盖的变量，如：@primary-颜色：#1B88EE；antd通过less-loader的modifyVars规则注入主题变量：[{test:/\.less$/,use:[{loader:'style-loader',},{loader:'css-loader',//将CSS翻译成CommonJS},{loader:'less-loader',//将Less编译成CSSoptions:{modifyVars:{'primary-color':'#1B88EE',},javascriptEnabled:true,},}]}]//注意less-loader的处理范围不应过滤掉node_modules下的antd包。所以我们在为公司定制组件库的时候，可以通过这两种方式为用户定制主题。当然，我们在设计的时候，变量名最好和主流框架保持一致，这样用户才能更好的上手。@原色：#1B88EE；//全局原色@link-color:#1B88EE;//链接颜色@success-color:#4FC7AF;//成功颜色@warning-color:#F8AC59;//警告颜色@错误颜色：#F95355；//错误颜色@font-size:28px;//主要字体大小@text-color:rgba(0,0,0,.65);//主要文本颜色@text-color-secondary:rgba(0,0,0,.45);//辅助文本颜色@disabled-color:rgba(0,0,0,.25);//禁用颜色@border-radius:4px;//component/浮层圆角@border-color:#d9d9d9;//边框颜色@box-shadow-base:02px8pxrgba(0,0,0,.15);//浮层阴影2.为项目设置通用样式common.less不知道大家在实际开发中是否遇到过经常需要为padding或者margin或者fontsize多写一层class的情况。.loop(20);.loop(@n,@i:0)when(@i=<@n){@size:@i*2;.pt-@{size}{padding-top:unit(@size,px)!important;}.pr-@{size}{padding-right:unit(@size,px)!important;}.pb-@{size}{padding-bottom:unit(@size,px)!important;}.pl-@{size}{padding-left:unit(@size,px)!important;}.mt-@{size}{margin-top:unit(@size,px)!important;}.mr-@{size}{margin-right:unit(@size,px)!important;}.mb-@{size}{margin-bottom:unit(@size,px)!important;}.ml-@{size}{margin-left:unit(@size,px)!important;}.fs-@{size}{font-size:unit(@size,px)!important;}.loop(@n,(@i+1));}//例如pt-2pt-16pt-40fs-16fs-24等一般less加上上面这段后，如果有一些特殊的边距或者字体，可以直接这样写class="mb-20"，你可以省点力气写一个不必要的类。当然，常用的宽度或者高度可以通过when循环来解决。需要注意的是less没有if-else判断。所有的判断也是通过when关键字来解决的。更新补充：lessv3.9实现了各个循环的写法，v3.0也实现了if判断。更新后写法如下：each(range(2,40,2),{.p-@{value}{padding:@value*1px!important;}.pt-@{value}{padding-顶部：@value*1px!important;}.pr-@{value}{padding-right:@value*1px!important;}.pb-@{value}{padding-bottom:@value*1px!important;}.pl-@{value}{padding-left:@value*1px!important;}.m-@{value}{margin:@value*1px!important;}.mt-@{value}{margin-top:@value*1px!important;}.mr-@{value}{margin-right:@value*1px!important;}.mb-@{value}{margin-bottom:@value*1px!important;}.ml-@{value}{margin-left:@value*1px!important;}.fs-@{value}{font-size:@value*1px!important;}});3.习惯使用Mixins什么是mixins？中文翻译是“混”的，将一些规则级样式的复用归类为可以带参数的函数。常见的有：.ellipsis(@w:auto){width:@w;溢出：隐藏；文本溢出：省略号；空白：nowrap；word-wrap:normal;}//对于iphoneX+.safe-area-inset-bottom(){padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom);}.hairline-bottom(@left:0,@right:0,@border-color:@border-color){position:relative;&::after{位置：绝对；内容：””;顶部：自动；是的是的;底部：0；左：@left；-底部：1pxsolid@border-color；变换：scaleY(0.5)；}}使用方法：body{.safe-area-inset-bottom();}//编译后的CSS代码body{padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom);}4.实现随机函数。我用过less和sass。使用上最大的不同就是less缺少了随机函数，会影响一些高级效果的实现，那么less中如何实现随机函数呢？通过配置javascriptEnabled:true来允许执行内联js代码：body{top:~`Math.random()*100+'px'`;}由于安全隐患，以上配置将被丢弃，3.0版本默认设置为false，替换为@plugin://less-plugin.jsmodule.exports={install:function(less,pluginManager,functions){functions.add('random',function(){returnnewless.tree.Dimension(Math.random());});}};@plugin"less-plugin";body{top:random()*100px;背景：rgba(0,0,0,random());}5.@import指令使用~作为别名@import简介如果扩展名是.css，文件内容将按原样输出@import'./style.css'如果是任何其他扩展名，它将被导入为.css文件。更少的文件。@import'./style'如果有~符号，会把别名和地址拼接成最终地址。@import'~@/assets/variable.less'在vue项目中经常看到：@import'../../../assets/variable.less'可以简写如下：@import'~@/assets/variable.less'这里的~符号表示后面的值是alias，对应的值会在webpack的alias配置中找到。更新补充：webpack的less-loader默认options.webpackImporter为true，所以配置~asalias已经废弃。当然，~符号还是有它的意义的。当import找不到地址时，会从node_modules中查找！！！一般情况下@import'@/assets/variable.less'就够了
