less 中的命名参数

下图是我的 html 结构：页面上已经引入了一个6.命名参数.css文件(我是用考拉进行编译的)   

	
		
		
		
	
	
		

				wrap
			

				inner1				
			
	
		
	

下面是我的less文件代码(提供复制，主要看下图)

.juzhong(@s,@c,@w){
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-style:@s ;
    border-color:@c ;
    border-width:@w ;
       
}
.wrap{
   
    position: relative;   
    width: 400px;
    height: 400px;
    background: deeppink; 
    .juzhong(solid,blue,10px);
      
      .inner{
        position: absolute;       
        width: 200px;
        height: 200px;
        background: pink;        
        .juzhong(10px,black,solid);    
            
    }
}

 可以看到我们定义的混合的形参列表顺序是：border-style，border-color，border-width

显然，2的顺序和我们定义的混合形参列表1的顺序是一样的

然后我们看看3，顺序完全乱的，那我们编译完会造成什么呢？看下图：

从图中可以明显看到，因为调用混合时我们的实参列表顺序是错误的，所以到最后编译完得出来的CSS也是错误的！！！

我们如果就想乱写顺序怎么办呢？终于到解决办法了！！！

我们可以通过命名参数 来解决 ：我们再调用混合时在参数前面加上他自己的参数名（形参名）中间用逗号(，)隔开

如：.juzhong(@c:black,@s:solid,@w:10px)

这样参数没有放置值的任何顺序，它们可以通过名称来进行引用。