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

  @charset 'utf-8';

 //一、注释

  /*我可以被转译*/

  //我不可以被转移

 //二、变量

  //@声明变量 @自定的name:值

  @color_01: #eee;

 //三、混合

  //1. 混合

  .time{

    color: red;

  }

  .odiv{

    width: 100px;

    height: 100px;

    background: @color_01;

    .time;

  }

  //2. 混合传参 类似于js中的函数

  .function( @ev_width, @ev_height, @ev_background){

    width: @ev_width;

    height: @ev_height;

    background: @ev_background;

  }

  .box{

    .function( 100px, 100px, red); //调用时传入实参即可

  }

  //3.混合传参-默认值

  .function( @ev_width: 100px, @ev_height: 100px, @ev_background: red){

    width: @ev_width;

    height: @ev_height;

    background: @ev_background;

  }

  .box{

    .function(); //如果有值读取实参,如果没有走默认值

  }

 //四、匹配

  //1.所谓匹配,类名一样都是trianglefun,判断参数第一位

  //比如说我现在想写一个三角,原声css肯定是这么写

  .triangle{

    width: 0px;

    height: 0px;

    border-width: 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{

    width: 0px;

    height: 0px;

    border-width: 10px;

    overflow: hidden;

    .trianglefun( left, #eee);

  }

  //less 给我们提供了一个方法 @_ ,@_方法的意思是不管匹配到那个都会执行@_方法内的代码(即使没有匹配到任何一个,但是只要执行力这个方法,那么就会调用这个函数) , 但是需要注意后面必须也要加上之前定义的其他参数

  .trianglefun( @_, @color){

    width: 0px;

    height: 0px;

    border-width: 10px;

    overflow: hidden;

  }

  //此时我们在调用的话,是不是简洁了很多

  .triangle{

    .trianglefun( left, #eee);

  }

 //五、运算

  //1. + - * /

  @w: 200px;

  .item{

    width: @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{

    width: 100px;

    height: 100px;

    .border();

  }

 //八、 避免编译

  //1.～''

  div{

    width:~ 'calc(100% - 10px)';

  }

 //九、 !important

  div{

    width: 10px !important;

    .trianglefun( left, #eee) !important;

  }

     //ps: 怎样 你学会了吗 ！！！