跟我一起了解less（5）：函数的参数与!important
关于函数的参数，官方给出了多种策略，这叫人看上去有点面向对象的感觉（函数是特殊的mixin，所以下面的很多特性mixin都通用）
1、参数的表现形式，“,”和“;”（逗号和分号）
比如说一个函数.aaa(@par1,@par2)里面有两个参数，参数之间用“,”间隔，但在less中“,”的含义是“或”、“并列”、“连接”的意思，所以在函数的参数中“,”也有可能被当做这几种含义来对待。
less会根据下面两方面来识别：
（1）当参数中只有“,”的时候，“,”才是作为参数的分隔符
（2）当参数中既有“,”又有“;”时，“;”作为参数的分隔符，而“,”只是参数的一部分
所以，less在语法中建议用“;”来区分函数中的每个参数。
下面举个例子：
//用法一：
.trans(@vals) {
width:50px;
height:50px;
background:gold;
transition-duration:1s;
transition-property:@vals;
}
#box1 {
.trans(width,height;); //这里的“,”就会作为一个整体传入到函数中，“;”分割参数，这里表示就一个参数
}
#box1&:hover{
width:25;
height:25;
}
//如果这么写就会报错
.trans2(@w,@h;@col) { //因为less认为 @w,@h 是一个参数
width:50px;
height:50px;
background:@col;
transition-duration:1s;
transition-property:@w,@h; //所以你无法获得单个变量的值
}
#box1 {
.trans2(width,height;gold);
}
#box1&:hover{
width:25;
height:25;
}
当你调用函数的时候，less会告诉你@w未定义。
2、集合体参数，这部分在less中称作分离（detached）
如何定义集合体变量：@aaa:{ 内容 }; ，下面给出例子
//用法二：
@gather: { //定义一个detached变量
width:50px;
height:50px;
background: red;
}; //因为是变量，所以“;”是一定要加上的，否则报错，这点和函数不同
.func(@par) {
.box-part2 { @par(); } //如果要使用detached变量，必须加上圆括号“()”，这是语法规定
}
.func(@gather);
//注：detached变量在定义时的“{}”属于语法结构，所以在调用detached变量时只返回“{}”内部的东西。
3、@arguments和@rest变量
当函数的参数个数不确定时，我们不仅要接受还要对所有的参数做处理，可以用下面的方法
//用法三：当参数固定时，用@arguments来获取全部的参数
.borders(@w,@s,@c) {
border:@arguments;
}
.box-part3 {
width:50px;
height:50px;
.borders(2px,solid,#F51);
}
//用法四：当参数不确定时，也可以用@arguments来获取全部参数
.size(@cor:#91A) {
width:50px;
height:50px;
background:@cor;
}
.transformation1(...) { //用“...”来表示不确定参数（三个点）
.size();
@argumentsCnt : length(@arguments); //length()是内置函数，可以获取项目个数，在这用来获取参数个数
& when not(@argumentsCnt = 0) {
transform:@arguments; //如果有参数才执行transform变形
}
}
.box-part4 { //这是有参数的情况
.transformation1(translateY(25px),rotate(25deg));
}
.box-part5 { //这是没有参数的情况
.transformation1();
}
//用法五：指定一个参数，剩下的参数不确定
.size(@cor:#91A) {
width:50px;
height:50px;
background:@cor;
}
.transformation1(@c,...) { //不缺定的参数依然可以用“...”来代替，也可以用“@rest...”来代替
.size();
transform:@arguments; //@arguments会获取全部的参数，包括@c
}
.box-part4 {
.transformation1(#333,translateX(25px),rotate(25deg));
}
说明：这个例子看起来没什么用，但我们换个思维，可以利用固定一个参数，来约束这个函数必须要输入一个参数，这样就不必像用法四一样“& when not(@argumentsCnt = 0) { ”，在函数内部判断arguments数量了。
//如果我们要单独获取不确定的参数，不包括@c，我们可以用下面的方法
.size(@cor:#91A) {
width:50px;
height:50px;
background:@cor;
}
.transformation1(@c; @args) { //我们完全可以不用@arguments，自定义一个变量就可以给这个变量传入多个值，中间用空格隔开就可以
.size(@c);
transform:@args;
}
.box-part4 {
.transformation1(#333;translateX(25px) rotate(25deg)); //这是传入了两个参数，而第二个参数我给传入了两个值
}
总结：总体来说@arguments的引入增强了代码的可读性，但却降低了参数的灵活性，如何来用就需要我们自己衡量一下了。
4、函数的匹配模式
官方称作Pattern-matching，但我感觉这更像是函数的重载，下面通过几个例子对比着看看less的这种特性
//用法六：多个重名的函数，参数不同，调用时会根据参数个数和固定值参数来调用
.size(big;@cor:#91A) { //1~2个参数，第一个参数=big的时候才会被调用
width:50px;
height:50px;
background:@cor;
}
.size(small;@cor:#91A) { //1~2个参数，第一个参数=small的时候才会被调用
width:25px;
height:25px;
background:@cor;
}
.size(@w;@h;@cor) { //3个参数的时候才会被调用
width:@w;
height:@h;
background:@cor;
}
.box-part5 {.size(big);} //调用第一个函数
.box-part6 {.size(small;#5F1);} //调用第二个函数
.box-part7 {.size(10px;10px;blue);} //调用第三个函数
5、mixin外的!important，如果在mixin调用的后面加上!important，相当于内部所有的属性都加上!important
//用法七：
.box(@w;@h;@cor) {
width:@w;
height:@h;
background:@cor;
}
.box-part8 { .size(10px;10px;blue) !important;}
to be continue ....
