跟我一起了解less（4）：函数与混合
讲函数之前先说说我对“混合”的理解，“混合”官网称作mixin，理解为可以把一个集合体嵌入到另一个集合体中、也可以把两个集合体捏合成一个集合体，而这个集合体就称作mixin。
举个例子：.cls { background:#000000;} 这是最常见class选择器的样式，但在less认为，这就是一个mixin。
除去上面的废话，先来看看函数的语法：
1、函数（语法：.aaa(参数) { 内容 } ），函数名前一般用类选择器的符号“.”，但我发现用“#”也可以，有兴趣的同学可以多试试
//用法一：
.size() { //没有参数的函数，函数体是样式，调用后直接返回函数体的样式
width: 50px;
height: 50px;
}
.func1(@c) { //函数内部可以声明变量，同一作用域内都可以调用
.size();
@col: @c;
}
.box-part1 {
.func1(#F90); //我们给函数传参后，@col就有值了，下面就可以调用@col变量，而函数中的样式.size()会直接显示出来
}
.func2(@c:#F30, @bc:#999) { //函数可以有多个参数，参数可以有默认值
.size();
background-color: @c;
border:1px solid @bc;
}
.box-part2 {
.func2(#045,#0F0); //实参可以少于形参，但一定会是按顺序传入，less中的函数无法指定要传入哪个参数
}
.box-part3 { //我们也可以不传参数，使用参数的默认值
.func2();
}
2、混合（Mixin）
说完函数，再说混合就容易理解了，因为less的函数就是一种混合，所以在很多情况下，如果函数里面的是样式，并且函数没有参数，在调用这个函数的时候是可以不用加括号的，就像上面的“用法一”中 .size(); 等同于 .size; 。
但函数的命名并非是选择器名，但如果把各种选择器以类似于函数的这种用法来使用，这就是Mixin。
//用法二：模拟函数的用法，直接调用
#box1 { //最正常的id选择器
width:50px;
height:50px;
}
#box2(@w:50px,@h:50px,@c:#0F0) { //选择器加了参数就会变成函数，只能被调用
width:@w;
height:@h;
background-color:@c;
}
#box3 { //让#box3来沿用#box1的样式
#box1;
}
#box4 {
#box2(40px,40px,#888); //#box4来调用#box2函数，来使用#box2内部的样式
}
//用法三：当选择器一层层包含关系时，可以嵌套使用，也可以嵌套调用
#box5 {
#box5-sub1{ //指选择#box5里面的#box5-sub1
}
.box5-sub-part { //也可以嵌套不同的选择器
width:25px;
height:25px;
background-color:#F10;
}
#box5-sub3{
#box5-sub1; //嵌套的选择器也可以互相调用
}
}
3、作用域
less中的变量和函数也可以在指定作用域中使用，下面我举几个案例
//用法四：函数调用
.space { // .space 并不是一个类，而是定义的一个作用域
.size() { //.size() 函数是在 .space域中的
@width:50px;
@height:50px;
}
}
.box-part1 {
.size(); // 这是在.space作用域外调用.size()函数
width:@width; //并使用函数中的变量值
height:@height;
}
结果会提示报错，因为.size()找不到，当我稍微改动一下 .size() 的调用，如下：
.box-part1 {
.space > .size(); //通过 “>” 符号来指定作用域中的方法，就可以调用了
width:@width;
height:@height;
}
//用法五：作用域对变量的影响
@height:25px;
.space-box {
.space {
.size {
@width:50px; //作用域中的值=50
@height:50px;
}
}
}
@width:25px; //作用域外的值=25
.box-part2 {
width:@width; //取的是作用域外的值=25
height:@height;
}
.box-part3 {
.space-box > .space > .size;
width:@width; //取的是作用域中的值=50
height:@height;
background-color: aquamarine;
}
.box-part4 {
width:@width;
height:@height; //作用域中的变量@height被赋值并不影响作用域外@height的值，仍然=25
background-color: aquamarine;
}
总结：因为有作用域的约束，我们就可以大胆的使用less了，也不用担心多个人开发项目时对于变量重名所遇到的风险
作用域表示方法：官方给出了下面几种写法，但总体来说就是“>”加不加都行（但我认为为了增加代码可读性建议加上符号）
#outer > .inner;
#outer > .inner();
#outer.inner;
#outer.inner();
to be continue ....
