一. 语言特性

　　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，相当于继承）

@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";

Less相关