less语法--混合（mixins）上

普通混合

一、什么是混合？
混合就是一种将一系列属性从一个规则及集引入（“混合”）到另一个规则集的方式。
二、实例
1、less编写
.border{
color:#00f;
font-family:“宋体”
}
h1{font-size:20px;.border}
h2{font-size:20px;.border}
2、编译结果
h1{font-size:20px;color:#00f; font-family:“宋体”}
h2{font-size:14px;color:#00f; font-family:“宋体”}

不带输出的混合

一、什么是不带输出的混合
如果你想要创建一个混合集，但是却不想让它输出到你的样式中
二、使用方法
在不想输出的混合集的名字后面加上一个括号，就可以实现
1、less语句
.border{color:#00f}
.border-mixin(){font-family:“宋体”}
h1{.border;.border-mixin}
2、编译结果
.border{color:#00f}
h1{color:#00f; font-family:“宋体”}

带选择器的混合

1、less语句
.border-mixin(){
&:hover{
border:1px solid #f00
}
}
h1{.border-mixin()}
2、编译结果
h1:hover{border:1px solid #f00}

带参数的混合

less语句
定义混合
.border(@border_color){
border:solid 2px @border_color
}

使用混合
.div{.border(#f00)}

编译结果
.div{border:solid 2px #f00}

带参数并且有默认值的混合

less语句
定义混合
.border(@border_color:#f00){
border:solid 2px @border_color
}

使用混合
.div{.border()}

不带参数使用
.div{.border()}

不带参数混合编译结果
.div{border:solid 2px #f00}

带参数使用
.div{.border(#f00)}

带参数混合编译结果
.div{border:solid 2px #f00}

来源：CSDN

作者：li_yan_

链接：https://blog.csdn.net/li_yan_/article/details/104481795