less

• 编译器koala
• 注释
  • /**/
  • //
• 变量：
  • @variable_width：500px；
• 混合（mixin）

  • .border{
        border:1px solid red;
    }
    .box{
        .border;
        width:150px;
        height:150px;
        background: blue;
    }

    .border_02(@border_width){
        border:solid #fff @border_width;
    }
    .test_hunhe{
        .border_02(30px);
    }

    .border_03(@border_10px){
        border:solid #fff @border_width;
    }
    .test_hunhe_03{
        .border_03();//.border_03(50px);
    }

    .border_radius(@border_radius){
        -webkit-border-radius:@border_radius;
        -moz-border-radius:@border_radius;
        border-radius:@border_radius;
    }
    
    .radius_test{
        .border_radius(20px);
        width:40px;
        height:40px;
        background:green;
    }

• 匹配模式
  • 相当于js中的if

  • .triangle(left,@w:20px,@c:blue)
    {
        0;
        height: 0;
        border-@w;
        border-color:transparent transparent transparent @w;
        border-style: dashed dashed dashed solid;
    }
    .triangle_left{
        .triangle(left);
    }

• 引入less及css
  • @import "a.less";
  • @import (less) "a.less";