1. 变量

styles.less

@charset "utf-8";
@test-width:100px;
@test-height:100px;

//变量以@开头，例如@变量:值
#box {
    width:@test-width;
    height:@test-height;
    background-color:red;
}

2. 混合

@charset "utf-8";
@test-width:100px;
@test-height:100px;

//变量以@开头，例如@变量
#box {
    width:@test-width;
    height:@test-height;
    background-color:red;

    .border;
    .text(25px); //如果用默认值，必须带括号,如.text();
}

//混合
.border {
    border:5px solid blue;
}

//混合-可带参数,默认15px
.text(@font-size) {
    font-size:@font-size;
    color:yellow;
}

3. 匹配模式

.triangle {
    .triangle(bottom,red);
}


//匹配模式
//公共的，@_是固定格式
.triangle(@_, @color:blue,@width:20px) {
    width:0;
    border-style:solid;
}

//上三角
.triangle(top, @color:blue,@width:20px) {
    border-width:@width;
    border-color:transparent transparent @color transparent;
}
//下三角
.triangle(bottom, @color:blue,@width:20px) {
    border-width:@width;
    border-color:@color transparent transparent transparent;
}

4. 运算

@test-width:100px;
@test-height:100px;


#box {
    width:@test-width + 10*2; //运算操作
    height:@test-height;
    background-color:red;
}

5. 嵌套操作

html

 <ul class="list">
     <li><a href="#">这里是一个标题<a><span>2016-10-23</span></li>
     <li><a href="#">这里是一个标题<a><span>2016-10-23</span></li>
     <li><a href="#">这里是一个标题<a><span>2016-10-23</span></li>
     <li><a href="#">这里是一个标题<a><span>2016-10-23</span></li>
     <li><a href="#">这里是一个标题<a><span>2016-10-23</span></li>
     <li><a href="#">这里是一个标题<a><span>2016-10-23</span></li>
 </ul>

less

.list {
    width:600px;
    list-style:none;
    li {
        margin:5px;
        padding:5px;
        background-color:#ccc;
    }

    a {
      //&表示上一层元素
       &:hover {
        color:red;
       } 
    }

    span {
        float:right;
    }
}

6. 更多用法http://lesscss.org/