@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
@font-size: 18px;
#header {
    color: @light-blue;
    font-size: @font-size;
}
@height: 0.5;
@size: 10px+10;
@color: #666 + 111;
#header2 {
    color: @color;
    height: percentage(@height); //0.5->50%
    font-size: saturate(@size,10%); //增加10%饱和度
    background-color: spin(lighten(@color, 25%), 10); //颜色亮度降低25%,并且色相值增加10 
}
.my-mixin {
    color: black;
}
//定义一个混合方法，想使用的时候再去触发
.my-other-mixin() {
    background: white;
}
.my-font-mixin {
    font-size: 20px;
}
.cat,
#wscat {
    background-color: aquamarine;
}
#header3 {
    .my-mixin;
    .my-other-mixin; //可以省略括号
    //.my-other-mixin()//当然也可以这样
    .my-font-mixin();
    #wscat;
    //.cat()//上下两种方法都可以
}
#header4 {
    color: black;
}
#header4 .navigation {
    font-size: 12px;
}
#header4 .logo {
    width: 300px;
}
#header4 {
    color: black;
    .navigation {
        font-size: 12px;
    }
    .logo {
        width: 300px;
    }
    &:before {
        content: "你好";
    }
    &-wsscat {
        background-color: bisque;
    }
}
@var: white;
#header5 {
    @var: red;
    #logo {
        color: @var; // red
    }
}


.bg(@color, @size) {
    background-color: @color;
    font-size: @size;
}

.background{
    .bg(#555555,16px)
}