less的基本使用

less css预处理器
1.优点：
        (1) 对css进行扩展，减少很多css的代码量
        (2) 将css赋予动态语言的特性，比如变量，继承，运算，函数
        (3) 可以在客户端和服务器端运行
2. 使用：
        (1) 变量 
            通过@声明一个css变量:       

@color: #fff;
#header {
    color: @color;
}

        (2) Mixins 混入，类似函数或者宏
           

.border-radius(@radius: 3px) {
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
}
#header {
    .border-radius(10px);
}
.btn {
    .border-radius;
}

            注意： 
                1) 可以不使用参数 .wrap() {...} .pre{.wrap}
                2) 内置变量@arguments代表所有参数(运行时)的值 
                    .boxShadow(@x:0, @y:0, @blur:1px, @color:#000){
                       box-shadow: @arguments;
                    } 
                   注意，在参数没有默认值的前提下使用@arguments调用时必须赋值，否则会导致整个页面内的less语法出错而失效。
                3) Mixins必须使用ID或者类，即#xx或.xx，否则无效。
        (3) 嵌套：
           

#header {
    &.f1 {
        float: left;
    }
    .mln {
        margin-left: 0;
    }
}

        (4) 运算&&函数：
           

@init: #111;
@transition: @init * 2;
.swatch-color {
    color: @transition;
}
.light-color {
    lighten(@color, 10%)
}

            注意：
                运算主要是针对任何数字、颜色、变量的操作，支持加、减、乘、除、()或者更复杂的综合运算；而Functions主要是针对颜色，同时提供了部分数学函数。
        (5) 继承：
           

.animal {
    background-color: black;
    color: white;
}
.bear {
    &: extend(.animal);
    background-color: brown;
}

        (6) 作用域：
           

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

            注意：
                Less中的变量、Mixins等的作用域都只是当前文件！
        (7) 注释：
            单行注释，多行注释和css注释方式一样。