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;
}