@charset "utf-8";

body{
    background-color:#f5f5f5;
    font-size:14px;
}

@testW:300px;

.box{
    width:@testW + 20;
    height:@testW + 20px;
}

.box01{
    .box;
    background-color:#bc2720
}

//混合 - 可带参数

.border(@b){
    border: @b solid #ccc;
}

//混合 - 默认带参数

.border(@b:1px){
    border: @b solid #ccc;
}

.box{
    .border(2px);
}

.sanjiao{
    width:0;
    height:0;

    border-width:10px;
    border-color:transparent transparent red transparent;
    border-style:dashed dashed solid dashed;
}

//匹配模式

//三角方向
.triangle(top,@w:5px,@c:#ccc){
    border-width:@w;
    border-color:transparent transparent @c transparent;
    border-style:dashed dashed solid dashed;
}

.triangle(bottom,@w:5px,@c:#ccc){
    border-width:@w;
    border-color:@c transparent transparent transparent;
    border-style:solid dashed dashed dashed;
}

.triangle(left,@w:5px,@c:#ccc){
    border-width:@w;
    border-color:transparent @c transparent transparent;
    border-style:dashed solid dashed dashed;
}

.triangle(right,@w:5px,@c:#ccc){
    border-width:@w;
    border-color:transparent transparent transparent @c;
    border-style:dashed dashed dashed solid;
}

.triangle(@_,@w:5px,@c:#ccc){
    width:0;
    height:0;
    overflow:hidden;
}

.sanjiao{
    .triangle(top,5px);
}

//定位
.pos(r){
    position:relative;
}

.pos(a){
    position:absolute;
}

.pos(f){
    position:fixed;
}

.a{
    .pos(a);
}


//嵌套
.list{
    background-color:#bc2720
    width:600px;
    margin:30px suto;
    padding:0;
    list-style:none;

    li{
        background-color:#ccc;
        height:20px;
        margin-bottom:10px;
    }

    a{
        color:#000;

        &:hover{
            color:#bc2720;
        }
    }
}

css.less代码编译生成css.css代码

@charset "utf-8";
body {
  background-color: #f5f5f5;
  font-size: 14px;
}
.box {
  width: 320px;
  height: 320px;
}
.box01 {
  width: 320px;
  height: 320px;
  border: 2px solid #cccccc;
  background-color: #bc2720;
}
.box {
  border: 2px solid #cccccc;
}
.sanjiao {
  width: 0;
  height: 0;
  border-width: 10px;
  border-color: transparent transparent red transparent;
  border-style: dashed dashed solid dashed;
}
.sanjiao {
  border-width: 5px;
  border-color: transparent transparent #cccccc transparent;
  border-style: dashed dashed solid dashed;
  width: 0;
  height: 0;
  overflow: hidden;
}
.a {
  position: absolute;
}
.list {
  background-color: #bc2720
    width:600px;
  margin: 30px suto;
  padding: 0;
  list-style: none;
}
.list li {
  background-color: #ccc;
  height: 20px;
  margin-bottom: 10px;
}
.list a {
  color: #000;
}
.list a:hover {
  color: #bc2720;
}