less中混合

@charset "UTF-8";
//1 普通混合
//2 不带输出的混合:加()
.font_hx(){
    font-size: 28px;
    color: red;
}
h1{
    font: "微软雅黑";
    .font_hx;
}
h2{
    font-size: 16px;
    .font_hx;
}
//3 带选择器的混合
.font_hx(){
    font-size: 28px;
    color: red;
    &:hover{
        border: 1px solid blue;
    }
}
h1{
    font: "微软雅黑";
    .font_hx;
}
h2{
    font-size: 16px;
    .font_hx;
}
//4 带参数的混合/并且有默认值
.font_hx(@color:black){
    color: @color;
}
h1{
    font: "微软雅黑";
    .font_hx(green);
}
h2{
    font-size: 16px;
    .font_hx(red);
    &:hover{
       border: 3px solid saddlebrown;
    }
}
//5 带多个参数的混合
.font_hx(@color;@padding:xxx;@margin:2){
    color-3: @color;
    padding-3:@padding;
    margin: @margin;
}
h1{
    font: "微软雅黑";
    .font_hx(red);
}
h2{
    font-size: 16px;
    .font_hx(blue);
}
//6 命名参数
.font_hx(@color;@padding:xxx;@margin:2px){
    color-3: @color;
    padding-3:@padding;
    margin: @margin;
}
h1{
    font: "微软雅黑";
    .font_hx(@margin:1px;@color:red;@padding:10px);
}
h2{
    font-size: 16px;
    .font_hx(blue);
}
//7 @arguments变量，代表所有参数
.font_hx(@color;@padding:xxx;@margin:2){
    color-3: @arguments;
    padding-3:@padding;
    margin: @margin;
}
h1{
    font: "微软雅黑";
    .font_hx(red);
}
h2{
    font-size: 16px;
    .font_hx(blue);
}
//匹配模式
.border(all;@w:1px){
    border: @w;
}
.border(b-l;@w:1px){
    border-left: @w;
}
.border(b-r,@w:1px){
    border-right: @w;
}
h1{
    .border(b-l);//匹配不一样
}
//混合的返回值
.average(@x,@y){
    @average:((@x+@y)/2);
    @sum:(@x+@y);
}
h1{
    .average(16px;10px);
    padding: @average;
    margin: @sum;
}