开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第19天，点击查看活动详情
混合就是类似于编程语言中的函数，拥有函数的特征。
混合基础
1、基础玩法
//定义和使用less方法
.main() {
height: 100px;
width: 100px;
}
.box{
.main; //调用
}
注意1：定义函数的时候，需要使用()，从而告诉编译器，这是个方法，那在编译成css的时候，main是是不会出现在css中，如果没有()，则编译器会把main当做是普通代码块，一起编译到css中。
.main {
height: 100px;
}
.box{
.main;
}
// 编译后
.main { height: 100px; }
.box { height: 100px; }
注意2：在调用方法时，在函数没有参数的情况下，带不带()都不影响调用。
2、方法里面嵌套选择器
方法里面可以放选择器，当调用时，选择器会自动嵌套在调用函数的选择器中。同时，方法里面的&符号也表示了调用函数的选择器。
.main(){
height: 500px;
.son {
color: red;
}
}
.box{
.main();
}
// 编译后
.box { height: 500px; }
.box .son { color: red; }
3、给方法制定命名空间
为了不污染其他Less代码，Less方法可以通过命名空间来存储和调用
.outer() {
.inner {
color: yellow;
}
}
p {
.outer > .inner;
}
// 编译后
p {
color: yellow;
}
4、!important
在调用方法的时候，可以使用!important ，把方法中的每个样式都添加上!important。
.color(){
color: red;
}
p {
.color !important;
}
// 编译后
p { color: red !important; }
混合函数
5、传参
在使用混合的时候，可以使用参数形式，来更灵活的使用函数。
形参之间通过 分号或者逗号 分开。
.fun(@c;@w) {
color: @c;
width: @w;
}
p {
.fun(blue,100px);
}
6、形参默认值
上述的函数中，每次调用时都需要传递参数，否则报错。我们可以通过给默认参数的方式，指定不传参时的值。
.fun(@c:white , @w: 50px) {
color: @c;
width: @w;
}
p{
.fun();
}
7、命名参数：传参时指定形参名字
使用了默认参数后，传递实参时会按照形参位置来处理，比如上述例子中，如果你只想传值给@w，单纯传值是不行的，我们可以通过指定形参的方式来进行实参传递。
.fun(@c:white , @w: 50px) {
color: @c;
width: @w;
}
p{
.fun(@w:100px);
}
传实参的时候，带上形参的名字即可实现指定形参进行传参。
8、剩余参数arguments
函数内部可以使用剩余参数，也就是用@arguments表示所有参数。
形参可以写成... 的形式，表示参数个数、名字不定。
.fun(...) {
border: @arguments;
}
p{
.fun(1px,solid,red);
}
注意：@arguments不等于 ... ，因为参数可以使用具体参数和 ... 结合，比如：
.fun(@red,...) {
border: @arguments;
}
p{
.fun(red,1px,solid);
}
这里的@arguments等于 ... 加上@red参数。
9、给 ... 添加名字
在上面的例子中， ... 只能通过@arguments来调用，除了这种方式外，我们还可以给...添加一个名字，让函数内部可以调用
.fun(@padding...) {
padding: @padding;
}
p{
.fun(10px 20px 30px 10px);
}
// 编译后
p { padding: 10px 20px 30px 10px; }
10、模式匹配
模式匹配是类似方法复写（多态），定义多个同名函数，在调用的时候通过指令告诉编译器需要调用哪个方法。
.fun(@w,@h){
width: @w;
height: @h;
}
.fun(small){
.fun(10px,10px);
}
.fun(big){
.fun(100px,100px);
}
.box1{
.fun(small);
}
.box2{
.fun(big);
}
.box3{
.fun(10px,20px);
}
// 编译后
.box1 { width: 10px; height: 10px; }
.box2 { width: 100px; height: 100px; }
.box3 { width: 10px; height: 20px; }
11、获取方法里面的变量和内部方法
函数被调用后，函数里的定义变量会解析到当前调用的作用域下。
.fun(){
@r:red;
}
.box{
.fun();
color: @r;
}
这种特性可以当做函数返回的结果使用：
.border(...){
@b: @arguments;
}
.box{
.border(1px solid #fff);
color: @b;
}
同时，方法里面定义的内部方法也会解析到当前调用的作用域下：
.fun(){
.son(){
background: #fff;
}
}
.box{
.fun();
.son();
}
12、可以把一系列方法放到变量中，做成类似于JS对象的功能。
@color: {
.color(@c){
color:@c;
};
.bgcolor(@c){
background: @c;
};
.borderColor(@c){
border-color: @c;
};
};
.box{
@color();
.color(red);
.bgcolor(#fff);
.borderColor(#000);
}
混合校验
Less的混合提供了参数的校验，在满足条件的时候才调用方法。
13、混合条件
.fun(@a) when (@a > 20px){
width: @a;
}
.fun(@a) when (@a <= 20px){
height: @a;
}
.box{
.fun(30px);
}
.bo1{
.fun(10px);
}
// 编译结果
.box { width: 30px; }
.bo1 { height: 10px; }
14、混合条件加入逻辑运算符
.fun(@a) when not (@a < 20px){ // 大于或等于20px
height: @a;
}
.fun(@a) when (@a > 10px) and (@a < 20px){ // 大于10px 并且小于200px
width: @a;
}
.box{
.fun(30px);
}
.bo1{
.fun(15px);
}
// 编译后
.box { height: 30px; }
.bo1 { width: 15px; }
15、混合使用Less自带的函数进判断
Less内部提供了很多方法给我们调用，比如判断传入值是不是一个颜色值，我们可以利用Less提供的判断数据类型的方法，对方法进行校验
.fun(@a) when (iscolor(@a)){
color: @a
}
.fun(@a) when (isurl(@a)) {
background: @a;
}
.box{
.fun(red);
}
.bo1{
.fun(url('../logo.png'));
}
// 编译后
.box { color: red; }
.bo1 { background: url('../logo.png'); }
16、函数体的继承
在使用校验时，可以提供一个同名的不校验的函数，里面可以存放校验的公共函数部分
.fun(@a) when (iscolor(@a)){
color: @a
}
.fun(@a) when (isurl(@a)) {
background: @a;
}
.fun(@a) { // 所有调用了fun的地方都会使用这部分代码。
font-size: 20px;
}
.box{
.fun(red);
}
.bo1{
.fun(url('../logo.png'));
}
// 编译后
.box { color: red; font-size: 20px; }
.bo1 { background: url('../logo.png'); font-size: 20px; }
