变量

@color:red;@font-size:14px;h1{    color:@color;    font-size:@font-size;}

@happy:red;@life:'happy';h1{    color:@@life;}

解析为：

h1{    color:red;}

插值

@my-selector: banner;.@{my-selector} {  font-weight: bold;  line-height: 40px;  margin: 0 auto;}

解析为：

.banner {  font-weight: bold;  line-height: 40px;  margin: 0 auto;}

高级应用：

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

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

作用域

1. 变量使用之前不需要定义

2. 变量从当前作用域一直往上找，直到到根

3. 变量在同一个作用域里声明多次，使用最后一个（类似css覆盖）

@var: 0;.class {  @var: 1;  .brass {    @var: 2;    three: @var;    @var: 3;    .inner{        val:@var;    }  }  one: @var;}

解析为：

.class {  one: 1;}.class .brass {  three: 3;}.class .brass .inner {  val: 3;}

混入(类)

一些属性的集合

无参

.mod{    border-radius:5px;}.header{    .mod;//.mod()}

有参

单参

.mod(@radius){    border-radius:@radius;}

多参（推荐分号）

.mixin(@color: black; @margin: 10px; @padding: 20px) {  color: @color;  margin: @margin;  padding: @padding;}.class1 {  .mixin(@margin: 20px; @color: #33acfe);}.class2 {  .mixin(#efca44; @padding: 40px);}

逗号和分号混合使用时，以分号作为分隔符，逗号的参数作为一组

.name(1, 2, 3; something, else)//2个参数.name(1, 2, 3)//三个参数.name(1, 2, 3;)//一个参数

有参带默认值

.mod(@radius:5px){    border-radius:@radius;}

带选择器

.mod{    &:hover{        color:#fff;    }    .active{        color:red;    }}

若一个类不想被解析到css文件里:

.mod(){    border-radius:5px;}

类调用时，圆括号在无参，有参带默认值时可选

调用时给类添加 !important，类中所有的属性都会加上 !important

多个参数时，可以使用逗号，分号隔开，建议用分号

arguments

.transition (@moveStyle :all;@delayTime : 4s;@moveType : ease-in; @moveTime : 2s){    -webkit-transition: @arguments;        -moz-transition: @arguments;        -o-transition: @arguments;        -ms-transition: @arguments;        transition: @arguments;    } 

继承(1.4.0)

.demo{  color:red;  font-size:19px;}div{  &:extend(.demo);  background-color: #red;}

解析为：

.demo,div {  color: red;  font-size: 19px;}div {  background-color: #red;}

避免编译

.class {  filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";}/* 实际上会输出下面的代码: */.class {  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);}div{    color:red~"\9\0"}div{    color:red\9\0}

javascript的表达式

@string: `'iwjw'.toUpperCase()`; //IWJW