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);    
            
    }
}

less 中的命名参数_第1张图片

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

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

然后我们看看3,顺序完全乱的,那我们编译完会造成什么呢?看下图:

less 中的命名参数_第2张图片

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

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

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

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

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

 

 

你可能感兴趣的:(Less)