4.混合(mixins)
1.普通混合
①什么是混合:混合就是将一系列属性从一个规则集引入(“混合”)到另一个规则集的方式。
②实例:
Less编写:
.bordered{
border-top:1pxsolid black;
border-bottom:2pxsolid black;
}
#menu a{
color:#111;
.bordered;
}
.post a{
color:red;
.bordered;
}
编译结果:
#menu a{
color:#111;
border-top:1px solid black;
border-bottom:2pxsolid black;
}
.post a{
color:red;
border-top:1px solid black;
border-bottom:2pxsolid black;
}
2.不带输出的混合
①什么是不带输出的混合:如果你想创建一个混合集,但是却不想让他输出到你的样式中,在不想输出的混合集后面加上一个括号,就可以实现。
②实例:
Less编写:
.font_hn(){
color: red;
font-family: microsoft yahei;
}
h1{
font-size: 28px;
.font_hn;
}
h2{
font-size: 24px;
.font_hn;
}
编译结果:
h1 {
font-size:28px;
color:red;
font-family:microsoft yahei;
}
h2 {
font-size:24px;
color:red;
font-family:microsoft yahei;
}
3.带选择器的混合
Less语句:
.my-hover-mixin {
&:hover{
border: 1px solid red;
}
}
button {
.my-hover-mixin();
}
h1{
.my-hover-mixin();
}
编译结果:
.my-hover-mixin:hover{
border: 1px solid red;
}
button:hover {
border: 1px solid red;
}
h1:hover {
border: 1px solid red;
}
4.带参数的混合
使用时需要传一个参数进去
Less语句:
.border(@color){
border: 1px solid @color;
}
h1{
&:hover{
.border(green);
}
}
h2{
&:hover{
.border(#000);
}
}
编译结果:
h1:hover {
border: 1pxsolid #008000;
border: 21px #008000;
}
h2:hover {
border: 1px solid #000000;
border: 21px #000000;
}
5.带参数并且有默认值
Less语句:
.border_you(@color:red){
border: 1px solid @color;
}
h1{
&:hover{
.border_you();
}
}
h2{
&:hover{
.border_you(yellow);
}
}
编译结果:
h1:hover {
border: 1px solid #ff0000;
}
h2:hover {
border: 1px solid #ffff00;
}
6.带多个参数的混合
①什么是多参数:
1.一个组合可以带多个参数,参数之间用逗号或分号分割;
2.但是推荐使用分号分割,因为逗号分割有两个意思,它可以解释为mixins参数分割符,也可以解释为css列表分割符。
②官方阐述:
1.两个参数,并且每个参数都是逗号分割的列表:.name(1,2,3;something,ele);
2.三个参数,并且每个参数都包含一个数字:.name(1,2,3);
3.使用伪造的分号创建mixin,调用时候的参数包含一个逗号分割的css列表:.name(1,2,3;);
4.逗号分割默认值:.name(@param1:red,blue);
③实例分析:
Less语句:
.mixin(@color;@padding:xxx;@margin:2){
color-3:@color;
padding-3:@padding;
margin: @margin @margin @margin@margin;
}
.div{
.mixin(1,2,3;something,ele);
}
.div1{
.minxin(1,2,3);
}
.div2{
.mixin(1,2,3;)
}
编译结果:
.div{
color-3:1,2,3;
padding-3:something,ele;
margin:22 2 2;
}
.div1{
color-3:1;
padding-3:2;
margin:3 3 3 3;
}
.div2{
color-3:1,2,3;
padding-3:xxx;
margin:2 2 2 2;
}
注意:如果传参的括号里面全部都是以“,”分割,那么会依次传给各个参数;如果传参的括号里面既有“,”,又有“;”,那么会把“; ”前面看作一个整体,传给一个参数。
④定义多个具有相同名称和参数数量的混合:
定义多个具有相同名称和参数数量的混合是合法的,Less会使用它可以应用的属性,如果使用mixin的时候只带一个参数,比如 .mixin(@green),这个属性会导致所有的mixin都会使用强制使用这个明确的参数。
7.命名参数
①什么是命名参数:
引用mixin时可以通过参数名称而不是参数的位置来为mixin提供参数值,任何参数都可以通过它的名称来引用,这样就不必要按照任意特定的顺序来使用参数。
②实例:
Less语句:
.mixin{@color: black;@margin:10px;@padding:20px}{
color:@color;
margin:@margin;
padding:@paddding;
}
.class1{
.mixin(@margin:20px;@color:#33acfe);
}
.class2{
.mixin{#efca44;@padding:40px};
}
编译结果:
.class1{
color:#33acfe;
margin:20px;
padding:20px;
}
.class2{
color:#efca44;
margin:10px;
padding:40px;
}
8.@arguments变量
①什么是@arguments变量:
1.@arguments代表所有的可变参数;
2.注意在使用的赋值,值的位置和个数也是一一对应的,只有一个值,把值赋值给第一个,两个值,赋值给第一个和第二个,三个值,分别赋值给第三个……以此类推,必须把原来的默认值写上去。
②实例1:
Less语句:
.border(@x:solid,@c:red){
border:21px @arguments;
}
.div1{
.border();
}
编译结果:
.div1{
Border:21pxsolid #ff0000;
}
③实例2:
Less语句:
.border(@w:1px,@x:solid,@c:red){
Border:@arguments;
}
.div1{
border();
}
编译结果:
.div1{
border:21pxsolid #ff0000;
}
9.匹配模式
①什么是匹配模式:
传值得时候定义一个字符,在使用的时候使用哪个字符,就调用那条规则。
②实例:
Less语句:
.border(all,@w:5px){
border-radius:@w;
}
.border(t_l,@w:5px){
border-top-left-radius:@w;
}
.border(t_r@w:5px){
border-top-right-radius:@w;
}
.border(b_l@w:5px){
border-bottom-left-radius:@w;
}
.border(b_r@w:5px){
border-bottom-right-radius:@w;
}
Less调用:
如下:如果我想让四条边都是圆角,就调用all;
.bodrer{
.border(all,50%);
}
编译结果:
.border{
border-radius:50%;
width:50px;
height:50px;
background:royalblue;
}
10.得到混合中变量的返回值
①实例:
Less语句:
.average(@x,@y){
@average:((@x+@y)/2);
}
.div{
.average(16px,50px);
padding:@average;
}
编译结果:
.div{
padding:33px;
}
②实例分析:
1. 首先将16px和50px赋值给混合.average进行计算;
2. 将计算的结果赋值给变量@average;
3. 然后在div中调用@average的值;
4. 编译后就得到了average的值33px;