Less实战（三）：混合（Mixins）

混合（Mixins）

混合（Mixin） 是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。
Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。

@color: red;

.father{
    background:@color;
}

#son{
    color: @color;
    .father();
}

编译后 >>>

---

Mixins中的选择器

Mixins可以包含更多的属性，这些属性也能包含在选择器中

.kok(){
    &:hover{
        color: blue;
    }
}

div{
    .kok();
}

编译后 >>>

---

命名空间

可以在Mixins中指定多个属性作为子容器，方便拼接

#outer() {
    .inner1 {
      color: red;
    }

    .inner2{
        color: blue
    }
  }
  
  .c {
    #outer > .inner1();
  }

  .d{
      #outer > .inner2();
  }

编译后 >>>
其他两种写法：
以 “ . ” 为连接符指定属性，有间隔 >>>
以 “ . ” 为连接符指定属性，无间隔 >>>

---

!important 关键词

!important关键词也能被继承，而且会依次遍历

---

参数传递

可以对Mixins进行传参

#outer(@color) {
        color: @color;
}
.c{
    #outer(red)
}

---

混合匹配选择器

@_表示默认选择，@switch会根据传参匹配相关的参数来编译成CSS样式

.mixin(dark; @color) {
    color: darken(@color, 10%);
  }
  .mixin(light; @color) {
    color: lighten(@color, 10%);
  }
  .mixin(@_; @color) {
    display: block;
  }

@switch: dark;

.class {
  .mixin(@switch; #888);
}

---

函数功能

可以像js的函数一样进行传参和计算

.calc(@a,@b){
    @result:(@a+@b);
}

div{
    width:.calc(10,20)[@result];
}

---

混叠（Aliasing Mixins）

可以像设置js数组一样，设置多个可选择的组合

.color(){
    primary:red;
    secondary:grey;
}

div{
    color:.color()[secondary];
}

---

以上就是less的变量知识总结,函数部分涉及变量和判断，我会单独放在下一章进行讲解