前端必备-less，深入浅出五分钟熟练运用！

 @charset 'utf-8';

 //一、注释
  /*我可以被转译*/
  //我不可以被转移


 //二、变量
  //@声明变量 @自定的name:值
  @color_01:#eee;


 //三、混合
  //1. 混合
  .time{
    color: red;
  }
  .odiv{
     100px;
    height: 100px;
    background: @color_01;
    .time;
  }
  //2. 混合传参 类似于js中的函数
  .function(@ev_width,@ev_height,@ev_background){
    @ev_width;
    height:@ev_height;
    background:@ev_background;
  }
  .box{
    .function(100px,100px,red);//调用时传入实参即可
  }
  //3.混合传参-默认值
  .function(@ev_100px,@ev_height:100px,@ev_background:red){
    @ev_width;
    height:@ev_height;
    background:@ev_background;
  }
  .box{
    .function();//如果有值读取实参,如果没有走默认值
  }


 //四、匹配
  //1.所谓匹配,类名一样都是trianglefun,判断参数第一位
  //比如说我现在想写一个三角,原声css肯定是这么写
  .triangle{
     0px;
    height: 0px;
    border- 10px;
    overflow: hidden;
    border-color: red transparent transparent transparent;
    border-style: solid dashed dashed dashed;
  }
  //但是我想让他换个方向呢,就比较麻烦了,所以我们把它封装起来
  //分别为四个方向
  .trianglefun(top,@color){
    border-color: @color transparent transparent transparent;
    border-style: solid dashed dashed dashed;
  }
  .trianglefun(right,@color){
    border-color: transparent @color transparent transparent;
    border-style: dashed solid dashed dashed;
  }
  .trianglefun(bottom,@color){
    border-color: transparent transparent @color transparent;
    border-style: dashed dashed solid dashed;
  }
  .trianglefun(left,@color){
    border-color: transparent transparent transparent @color;
    border-style: dashed dashed dashed solid;
  }
  //现在我们已经风装起来了,但是其他的熟悉我们每次都还有写,能不能也封装起来啊
  .triangle{
     0px;
    height: 0px;
    border- 10px;
    overflow: hidden;
    .trianglefun(left,#eee);
  }
  //less 给我们提供了一个方法 @_ ,@_方法的意思是不管匹配到那个都会执行@_方法内的代码(即使没有匹配到任何一个,但是只要执行力这个方法,那么就会调用这个函数) , 但是需要注意后面必须也要加上之前定义的其他参数
  .trianglefun(@_,@color){
     0px;
    height: 0px;
    border- 10px;
    overflow: hidden;
  }
  //此时我们在调用的话,是不是简洁了很多
  .triangle{
    .trianglefun(left,#eee);
  }


 //五、运算
  //1. + - * /
  @w:200px;
  .item{
     @w - 20;
    color: #999 - 10;
  }


 //六、嵌套
  //1.嵌套
  //我们写了div,div下面是a链接,a链接下面是span标签,三层
  //<div><a href=""><span></span></a></div>
  //我们首先用原声的写法
  div{
    xxx;
  }
  div a{
    xxx;
  }
  div a span{
    xxx;
  }
  //但是在less里面又一个更简洁更清晰的写法
  div{
    xxx;
    a{
      xxx;
      span{
        xxx;
      }
    }
  }
  //2.&当前作用域,也就是他的父及
  //比如说我们之前想给一个div加hove效果,我们肯是这么加
  a{
    color:red;
  }
  a:hover{
    color:blue;
  }
  //我们来看一下less中的写法
  a{
    color: red;
    &:hover{//此时的 & 就是 a
      color: blue;
    }
  }


 //七、@arguments方法
  //1. @arguments 全部参数的集合
  .border(@w:1px,@color:#eee,@type:solid){
    border: @arguments;
  }
  .bor{
     100px;
    height: 100px;
    .border();
  }


 //八、 避免编译
  //1.～''
  div{
    ~'calc(100% - 10px)';
  }


 //九、 !important
  div{
     10px !important;
    .trianglefun(left,#eee) !important;
  }
    //ps: 怎样 你学会了吗 ！！！　

————————————————
版权声明：本文为CSDN博主「王海虎」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/xiaohu12685/article/details/80939138