Less相关

一. 语言特性

1, 变量（变量只定义一次，本质就是常量）

在代码中，同一个值经常重复出现多次，比如网站定下的基础颜色，字体大小，很多地方都要使用。将常用的值定义在一个地方，方便修改。

变量除了在css属性值里使用，还能用于选择器，属性名，URL，@import

选择器:  @mySelector: banner;  .@{mySelector}{color : #fff;}

URL:    @images: "../img";     body {background : url(@{images}/bg.png) no-repeat center center;}

@import： @themes: "../../src/themes";  @import "@{themes}/tidal-wave.less";

@basefontsize : 14px;

.load-mask {
    font-size : @basefontsize + 2;
}

2, 混合（Mixin，相当于继承，可带参数，@arguments）

@basefontsize : 14px;

.clearfix {
    display:block;
    zoom :1;
    &:after {
        content : "";
        display : block;
        font-size: 0;
        clear : both;
        height : 0;
        visibility : hidden;
    }
}
.load-mask {
    font-size : @basefontsize + 2;
    .clearfix;
}

 3, 嵌套

.load-mask {
    font-size : @basefontsize + 2;
    .clearfix;
    .inner {
        display : block;
    }
    &:before {
        content:"";
    }
}

3, 运算

　　　　数字，颜色，百分比，变量都能参与运算

　　　　@percent : 5%;

　　　　@color  : #333;

　　　　div {
　　　　　　width : @percent + 5%     // 10%
　　　　　　width : @percent - 5%      // 0%
　　　　　　width : @percent * 5%     // 25%
　　　　　　width : @percent / 5%     // 1%
　　　　　　// 百分比与纯数字运算和上述结果一致
　　　　　}

4, 函数（LESS内置了许多函数，如percentage(0.5)转换成百分比）

5, 作用域

编译器会在局部查找需要的变量或混合类，如果没有，编译器会在其父选择器作用域内查找

@var: red;

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

6, 导入

可以导入一个 .less 文件，此文件中的所有变量就可以全部使用。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉

@import "library"; // library.less
@import "typo.css";

7, Extend

　　.a:extend(.b)）: 仅继承.b

　　.a:extend(.b all) : 继承所有和.b关联的selector，如：.b.c

　　.a:extend(.b,.c) : 继承.b 和.c

　8, 函数

　　color("#aaa")  //#aaa

　　convert(9m,cm)  //900cm

　　default()  //用在条件里，返回boolean值，是否没有匹配的其它mixin

　　unit()  //删除或更换单位，一个参数为删除单位，两个参数为替换单位

　　escape()  //对字符串中的特殊字符做URL-encoding编码