Less

一、变量

@nice: #5b83ad
@light-blue: @nice + #111;

#header {
    background-color: @nice;
}

二、混合

定义一个类的样式

示例1：
    .bordered {
        border-top: 1px black solid;
        border-bottom: 1px black solid;
    }

    加载到#menu a内
    #menu a {
      color: #111;
      .bordered;
    }

    .post a {
      color: red;
      .bordered;
    }


示例2：混合带参数
    .border-radius(@values) {
          -webkit-border-radius: @values;
        -moz-border-radius: @values;
        border-radius: @values;
    }

    .box-radius{ width: @filler; heigth: 30px; border: 1px #ccc solid; .border-radius(4px) }


示例3：
    .a, #b {
        color: red;
    }
    .mixin-class {
        .a();
    }

    输出：
    .a, #b {
        color: red;
    }
    .mixin-class {
        color: red;
    }


示例4：
    .my-mixin {
        color: black;
    }
    .my-other-mixin() {
        background: white;
    }
    .class {
        .my-mixin;
        .my-other-mixin;
    }

    输出：
    .my-mixin {
        color: black;
    }
    .class {
        color: black;
        background: white;
    }

三、嵌套

示例1：

    #header{
        color: black;

        .navigation {
            font-size: 12px;
        }
    }

    output：

        #header {
            color: black;
        }
        #header .navigation {
            font-size: 12px;
    }

示例2：a 的 hover

    .box {
        a {
            color: red;
            $:hover {
                color: green;
            }
        }
    }

    output:
    .box a { color: red; }
    .box a:hover { color: green; }


示例3：arguments 可以将所有参数显示到值中

    .border-arg(@width, @color, @style){
        border: @arguments;            // 这里使用@arguments就相当于 @width @color @style
    }

四、运算

@base: 5%;
@filler: @base * 2;
.boxA { width: @filler; height: 20px; background-color: #c3c3c3; }

五、匹配模式

// 设置匹配
.trangle(top, @width, @color){
    border-width: @width; 
    border-color: transparent transparent @color transparent;
    border-style: dashed dashed solid dashed
}

.trangle(left, @width, @color){
    border-width: @width; 
    border-color: transparent @color transparent transparent;
    border-style: dashed dashed solid dashed
}

.trangle(right, @width, @color){
    border-width: @width; 
    border-color: transparent transparent transparent @color;
    border-style: dashed dashed solid dashed
}

.trangle(bottom, @width, @color){
    border-width: @width; 
    border-color: @color transparent transparent transparent;
    border-style: dashed dashed solid dashed
}

/* 匹配模式 */
.trangleL {
    width: 0; height: 0; overflow: hidden;
    .trangle(right, 18px, red)        /* 这里调用的right 就是右三角 */
}
<div class="trangleL"></div>

六、作用域 Scope

@var: red;
#page {
    @var: white;
    #header {
        color: @var; // white
    }
}

编译后：
#page .header {
    color: white;
}

七、注释

/* */    会被编译，输出会显示注释
//         不会被编译，输出不会显示注释

八、importe

导入less文件： @import 'libary';        不用加.less
导入css文件：     @import 'typo.css';    

九、url

@images: "../img";

// 用法
body {
    color: #444;
    background: url("@{images}/white-sand.png");
}

十、循环

.loop(@counter) when (@counter > 0) {        // 循环使用 定义函数名(参数) when (条件）
    .loop((@counter - 1));        // 每一次减1
    width: (10px * @counter);     // code for each iteration
}
div {
    .loop(3); // launch the loop
}

output:
div {
    width: 10px;
    width: 20px;
    width: 30px;
}

十一、合并

.mixin() {
    box-shadow+: inset 0 0 10px #555;
}
.myclass {
    .mixin();
    box-shadow+: 0 0 20px black;
}


.myclass {
    box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

十二、避免编译使用 “~”

.text {
    width: ~(30px + 30px);        // 这里就不会被计算，而直接输出width: 30px + 30px;
}

十三、与构建工具结合

可以使用gulp 或 webpack 来进行编译

参考资料

http://less.bootcss.com
http://www.wtoutiao.com/p/15bzfg3.html
http://www.w3cplus.com/css/sass-vs-less-vs-stylus-a-preprocessor-shootout.html
http://www.w3cplus.com/preprocessor/architecture-sass-project.html