Less 04 混入（Mixins）

目录：

Less 01 准备工作
Less 02 变量（Variable）
Less 03 扩展（Extend）
Less 04 混入（Mixins）
Less 05 参数混入（Parametric Mixins）
Less 06 方法混入 （Mixins as Functions）
Less 07 CssRules 直接混入（Passing Rulesets to Mixins）
Less 08 导入（Import）
Less 09 守卫（Guards）
Less 10 其他操作（完结）

先来看一个例子，知道什么是Mixin

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

在混入中，括号是可选的，即a()和a是等价的

不输出Mixin的class

要想不输出，用来混入的类，可以加一个()

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

编译后

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

在Mixin中使用选择器

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

编译后

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

命名空间

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

.c {
  #outer > .inner;
}

代码中的>是可选的哦

// 这些都是等价的
#outer > .inner;
#outer > .inner();
#outer .inner;
#outer .inner();
#outer.inner;
#outer.inner();

我们可以利用这一点，把mixin类放到一个id下面，从而不会与的别的样式产生冲突

#my-library {
  .my-mixin() {
    color: black;
  }
}
// which can be used like this
.class {
  #my-library > .my-mixin();
}

命名守卫（原谅我的翻译）

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

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

对于default，只要其中有一个为false，就没有办法使用

#sp_1 when (default()) {
  #sp_2 when (default()) {
    .mixin() when not(default()) { /* */ }
  }
}

关键字 !important

!important标记的mixin都会继承这个 !important

.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color;
}
.unimportant {
  .foo();
}
.important {
  .foo() !important;
}

输出

.unimportant {
  background: #f5f5f5;
  color: #900;
}
.important {
  background: #f5f5f5 !important;
  color: #900 !important;
}