跟我一起了解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 ....

转载于:https://www.cnblogs.com/wujianbufengsao/articles/6835986.html