版权声明： https://blog.csdn.net/qq_36652405/article/details/82707662
下图是我的 html 结构：页面上已经引入了一个6.命名参数.css文件(我是用考拉进行编译的)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/6.命名参数.css" />
</head>
<body>
<div class="wrap">
wrap
<div class="inner">
inner1
</div>
</div>
</body>
</html>
下面是我的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)
这样参数没有放置值的任何顺序，它们可以通过名称来进行引用。