LESS Mixins 介绍

Mixins 类似于定义和调用函数。比如说，如果我们需要创建一个重复的样式，mixins 就很方便了。Mixins 可能会也可能不会参数。例如：

.default-round-borders {
          border-radius: 5px;
     -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.round-borders (@radius) {
          border-radius: @radius;
     -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

我们上面有两种类型的声明。一个接受参数而另一个接收不参数。让我们看看这是如何在某处使用的：

@sky-blue: #87ceeb;
@dark-sky-blue: #baffff;

#header {
  background: @sky-blue;
  .default-round-borders;
}

.btn {
  background: @dark-sky-blue;
  .round-borders(3px);
}

上面的代码，一起编译将产生如下输出：

#header {
  background: #87ceeb;
          border-radius: 5px;
     -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.btn {
  background: #baffff;
          border-radius: 3px;
     -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}