Less 混入

混合相似于编程语言中的函数。

Mixins 是一组CSS属性，容许咱们将一个类的属性嵌套于另外一个类，被嵌入的类能够看做是变量，而且包含类名做为其属性，也就是说咱们能够用一个类定义样式而后把它看成变量，在另外一个类中，只要引用变量的名字，就可以使用它的全部属性。

在Less中，可使用类或者是id选择器以与CSS样式相同的方式声明mixin，它能够存储多个值，而且能够在必要的时候在代码中重复使用。

注意：当咱们调用mixin时，括号是可选的。

不输出mixin### 不输出mixin

若是要建立一个mixin，可是又不想要输出mixin的话，咱们能够在它的后面加上一个括号。

.myMixin1 {
      color: green;
    }
    .myMixin2() {
      background: red;
    }
    .allMixin {
      .myMixin1;
      .myMixin2;
    }
    
    // 输出
    .myMixin1 {
      color: green;
    }
    .allMixin {
      color: green;
      background: red;
    }

Mixins 中的选择器

Mixins不只能够包含属性，还能够包含选择器。

.myxkd-mixin() {
      &:hover {
      	color: red;
      	font-size: 30px;
        border: 1px solid green;
      }
    }
    button {
      .myxkd-mixin();
    }
    
    // 输出
    button:hover {
      	color: red;
      	font-size: 30px;
        border: 1px solid green;
    }

命名空间

若是要在更复杂的选择器中混合属性，则能够堆叠多个ID或类。

#outer {
      .inner {
        color: green;
      }
    }
    .xyz {
      #outer > .inner;
    }
    
    // 一样>和空白都是可选的
    #outer > .inner;
    #outer > .inner();
    #outer .inner;
    #outer .inner();
    #outer.inner;
    #outer.inner();

保护的命名空间

若是名称空间具备保护，则仅当保护条件返回true时，才使用由其定义的混合，命名空间保护的评估方式与mixin的保护方式彻底相同，好比下面的两个mixin的工做方式就会同样的：

#namespace when (@mode=huge) {
      .mixin() { /* */ }
    }
    
    #namespace {
      .mixin() when (@mode=huge) { /* */ }
    }

！important 关键字

!important 在mixin调用以后使用关键字将其继承的全部属性标记为 !important 。

.xkd (@bg: #f44586, @color: #d902e7) {
      background: @bg;
      color: @color;
    }
    .unimportant {
      .xkd();
    }
    .important {
      .xkd() !important;
    }
    
    // 输出
    .unimportant {
      background: #f44586;
      color: #d902e7;
    }
    .important {
      background: #f44586 !important;
      color: #d902e7 !important;
    }