Less的Mixin

什么是Mixin

Less中，允許你將一個類嵌入到另一個類中，被嵌入的類也可以看作變量。換句話說，你可以用一個類定義樣式，然后把它當作變量，在另一個類中，只要引用變量的名字，就能使用它的所有屬性，

Less把這種特性稱作 mixin，中文把翻譯為“混入”或“混合”，其目的就是從現有的樣式中添加屬性。請看以下Less代碼：

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

上述代碼中，.bordered 定義了一個屬性集。然后，在任何需要使用 .bordered 屬性集的選擇器中，只需像下面這樣調用就可以了：

1. #menu a {
2.   color: #111;
3.   .bordered;
4. }
5. .post  a {
6.   color: red;
7.   .bordered;
8. }

這樣一來，.bordered中定義的屬性集，就會在 #menu a 和 .post a 中體現出來。編譯后的CSS代碼為：

1. .bordered {
2.   border-top: dotted 1px black;
3.   border-bottom: solid 2px black;
4. }
5. #menu a {
6.   color: #111;
7.   border-top: dotted 1px black;
8.   border-bottom: solid 2px black;
9. }
10. .post  a {
11.   color: red;
12.   border-top: dotted 1px black;
13.   border-bottom: solid 2px black;
14. }

從上面的代碼可以看出：mixin 其實就是一種嵌套，簡單的講，mixin 就是規則級別的復用。除了類選擇器外，你也可以使用 id 選擇器來定義 mixin。如：

1. #bordered {
2.   border-top: dotted 1px black;
3.   border-bottom: solid 2px black;
4. }
5. #menu a {
6.   color: #111;
7.   #bordered;
8. }

編譯后的CSS代碼為：

1. #bordered {
2.   border-top: dotted 1px black;
3.   border-bottom: solid 2px black;
4. }
5. #menu a {
6.   color: #111;
7.   border-top: dotted 1px black;
8.   border-bottom: solid 2px black;
9. }

從上面的代碼可以看出，使用 class、id 定義mixin 時，mixin的定義會被原封不動的輸出到編譯生成的CSS代碼中。

如果希望編譯生成的CSS代碼中不包含mixin的定義，在定義 mixin時，只需在 class、id 的后面添加一對小括號即可。而在調用時，小括號是可選的。如：

1. #x() {
2.   border-top: dotted 1px black;
3.   border-bottom: solid 2px black;
4. }
5. #menu a {
6.   color: #111;
7.   #x;
8. }

編譯后的CSS代碼為：

1. #menu a {
2.   color: #111;
3.   border-top: dotted 1px black;
4.   border-bottom: solid 2px black;
5. }