less-mixin（混入）

mixin方法：一堆属性从一个规则集到另一个规则集。

1、

编辑less：

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  .bordered;
}

.post a {
  color: red;
  .bordered;
}

输出css：

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

2、类选择器和id选择器

编辑less：

.a, #b {
  color: red;
}
.mixin-class {
  .a();
}
.mixin-id {
  #b();
}

生成css：

.a, #b {
  color: red;
}
.mixin-class {
  color: red;
}
.mixin-id {
  color: red;
}

3、不输出混合

编辑less：

.my-mixin {
  color: black;
}
.my-other-mixin() {
  background: white;
}
.class {
  .my-mixin;
  .my-other-mixin;
}

生成css：

.my-mixin {
  color: black;
}
.class {
  color: black;
  background: white;
}

3、混合属性

编辑less：

.my-hover-mixin() {
  &:hover {
    border: 1px solid red;
  }
}
button {
  .my-hover-mixin();
}

生成css：

button:hover {
  border: 1px solid red;
}

4、复杂选择器混合属性（减少类名冲突）

编辑less：

#outer {
  .inner {
    color: red;
  }
}

.c {
  #outer > .inner;
}

生成css：

#outer .inner {
  color: red;
}
.c {
  color: red;
}