前端less学习笔记之混合（mixins）

学习总结并转载自[ https://juejin.im/post/5a2bc28f6fb9a044fe464b19#heading-6] 和 [ https://hackycy.github.io/2019/04/15/Less入门/]
感谢一些我忘记的网络博主

less混合

混合就是一种或者一系列属性从一种规则集引入（混合）到另一种规则集的方法

• 注意：

1. 使用 . 与 # 皆可作为方法前缀。
2. 使用时 .混合名; 和 .混合名;两者等价。
3. 可以带选择器混合：

     // less
    .p{
      	&:hover{
          background:red;
        }
  	 }
      div{                 
         .p();     
     }             
     //css
     div:hover{
    	 background:red;
     }

4. 一个混合中如果可以带有多个参数，每个参数之间用逗号或者分号分割开，不能逗号或者分号一起使用
   如. border(@a:10px,@b:50px;@c:30px){} 会报错

一. 普通混合(无参数混合)

1. 声明混合时不加双括号(即没有参数时),会导致 混合会编译成样式出现在 css中，如下面建议加上双括号。

	  less：
        .boder{
            boder-color:#fbc500;
            border-width:1px;
        }
        .wrap{
            color:blue;
            .boder;
        }
        css：
        .boder{
            boder-color:#fbc500;
            border-width:1px;
        }
        .wrap{
            color:blue;
            boder-color:#fbc500;
            border-width:1px;
        }

二. 带多个参数

1. 多个参数时，参数之间可以用分号或逗号分隔，不可一起使用
2. 实参传的是字符串，可以写多个值，可以用空格分开，要用逗号分开（但会把逗号当值传进去），不过所有实参都要以分号结尾。

//less
	.mixinone(@color, @padding,@c:1) {
        color:@color;
        padding:@padding;
        c:@c;
     }
     .div1{
        .mixinone(#000;2px);
      }
     //多个值
    .some{
        .mixinone(#000;2px 2px 1px 1px;1,2);
      }
  // css:
    .div1 {
        color: #000;
        padding: 2px;
         c: 1;
    }
     .some {
        color: #000;
        padding: 2px 2px 1px 1px;
         c: 1, 2;
    }

三. 默认参数混合

1. less可以使用默认参数，如果没有传参，使用默认参数
2. @arguments 犹如 JS 中的 arguments 指代的是 全部参数。
3. 传的参数必须带有单位

//less
          .border(@a:10px,@b:50px;@c:30px,@color:#000){
              border:1px solid @color;
              box-show:@arguments; // 指代所有参数
          }
          #wrap{
              .border(10px,5px,30px,red);
              //.border(@c:10px,@a:5px,@b:30px,@color:red);  //命名参数
          }
          #content{
              .border(0px);
          }
          #main{
              .boder();
          }
  //CSS
          #wrap {
              border: 1px solid red;
              box-shadow: 0px 5px 30px red;
          }
          #content {
              border: 1px solid #000;
              box-shadow: 0px 50px 30px #000;
          }
          #main {
              border: 1px solid #000;
              box-shadow: 10px 50px 30px #000;
          } 

四. 命名参数

引用mixin时，可以通过参数名称而不是参数的位置来为mixin提供参数值， 任何参数都可以通过它的名称来引用，这样就不用按照任意特定的顺序来使用参数。也就是调用某个写好的mixin时，括号里的参数名和值都写上。

注意：如果只写了其中的某个的引用，其他不写，会继续按照位置来匹配参数

//less
		.mar(@color:red,@c:2,@pad:1px){
            c: @c; 
            color:@color;
            padding: @pad;
             
         }
         .div2{
            .mar(@c:1;@color:blue;@pad:2px);
         }
          //只写了其中的某个的引用
         .div3{
            .mar(@c:1,2,3);
      	  }
  //css:
        .div2 {
            c: 1;
            color: blue;
            padding: 2px;
          }
        .div3 {
            c: 1;
            color: 2;
            padding: 3;
          }

五.@arguments变量：代表所有可变参数

@arguments代表所有可变参数，参数的先后顺序是你写的（）里的先后顺序；值的位置和个数是一一对应的，如果有参数取默认值，需要用命名参数的方式。

 //less：
    .border(@w:1px; @x:solid; @c:#ccc){
        border : @arguments;
    }
    p{
        .border();
    }
//css：
    p {
        border: 1px solid #ccc;
      }

六. 匹配模式：定义一个字符，使用时加上那个字符，就调用相应的规则

注意：如果定义一个和匹配模式引用名和形参都相同的混合，外加有一个变量@_(建议放在第一位)，代表当匹配模式调用时，这个混合也调用，所以这个这个混合用来作为匹配模式中的所有公共属性的混合

//less：
    .triangle(top,@width:20px,@color:#000){
        border-color:transparent  transparent @color transparent ;
    }
    .triangle(right,@width:20px,@color:#000){
        border-color:transparent @color transparent  transparent ;
    }
    
    .triangle(bottom,@width:20px,@color:#000){
        border-color:@color transparent  transparent  transparent ;
    }
    .triangle(left,@width:20px,@color:#000){
        border-color:transparent  transparent  transparent @color;
    }
    .triangle(@_,@width:20px,@color:#000){
        border-style: solid;
        border-width: @width;
    }
    #triangle{
        .triangle(left, 50px, #999)
    }

 // css:
    #triangle {
    	border-color: transparent transparent transparent #999;
        border-style: solid;
        border-width: 50px;
      }

七. 得到混合中变量的返回值：通过计算来获取值

//less：
.ave(@x,@y){    
    @cc:@x+@y;
    @d:@x/@y;
}
.div{
    .ave(6px,3px);
    c:@cc;
    d:@d;
}
// css:
.div {
    c: 9px;
    d: 2px;
}

八. 命名空间：有时混合中嵌套了比较多的规则，而我们只需要其中一部分，可使用命名空间获取

1. 使用 > 和 空格 效果一样，选择器，选择的是 儿子元素，就是必须与父元素 有直接血源的元素。也可以省略 ‘>’,用空格。

2. 在引入命令空间时，如使用 > 选择器，父元素不能加 括号。

3. 不得单独使用命名空间的方法 必须先引入命名空间，才能使用 其中方法。但是会执行引入的命名空间。

4. 子方法 可以使用上一层传进来的方法,使用方法和使用命名空间方法一样；

     //less
    #card(){
        background: #723232;
        .d(@w:300px){
            width: @w;
            
            #a(@h:300px){
                height: @h;
                #card .d(100px);//可以使用上一层传进来的方法
            }
        }
    }
    #wrap{
        #card > .d > #a(100px); // 父元素不能加 括号
    }
    #main{
        #card .d() #a(100px);   //用空格
    }
    /*  
     #d{
        .d();//报错，必须先引入 #card
    }
    */
    #con{
        //不得单独使用命名空间的方法
        //.d() 如果前面没有引入命名空间 #card ，将会报错
        
        #card; // 等价于 #card();
        .d(20px); //引入了#card，不报错，但是会执行#card；
    }
    /* 生成的 CSS */
    #wrap {
        height: 100px;
        width: 100px;
      }
    #main {
        height: 100px;
        width: 100px;
    }
    #con {
        background: #723232;
        width: 20px;
    }
   

九. 多个相同混合：定义多个具有相同名称和参数的mixin是合法的。

会把所有相同混合名的属性全部调用，不管多少个参数。
注意：多个相同混合,会把不同值的属性全部展示出来，即使属性名相同；如果值相同，只展示一次

   //less：
      .mixin(@color:red,@c:1,@pad:1px){
        c: @c;
        color:@color;
        padding:@pad;
        border-color: yellow;
    }
    .mixin(@color:red,@c:2){
        c: @c;
        color:@color;
        border-width: 1px;
        border-style: dashed;
    }
    .mixin(@color:red){
        color:@color;
        border-style: solid;
        border-width: 1px;
    }
    .div4{
        .mixin(blue);
    }
    生成CSS：
    .div4 {
        c: 1;     
        padding: 1px;
        border-color: yellow;
        c: 2;
        border-style: dashed;  //不同值的相同属性
        color: blue;
        border-style: solid;   //不同值的相同属性
        border-width: 1px;   相同值的相同属性
      }