4.Less混合（mixins）

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；