混合：

混合可以將一個定義好的classA輕松的引入到另一個classB中，從而簡單實現classB繼承classA中的所有屬性。任何CSS中的class或者id都可以引入

Less：

1 2 3 4 5 6

.aWidth{width:400px;} #aHeight{height:600px;} p{ ??.aWidth; ??#aHeight; }

CSS：

1 2 3 4 5 6 7 8 9 10

.aWidth?{ ??width:?400px; } #aHeight?{ ??height:?600px; } p?{ ??width:?400px; ??height:?600px; }

帶選擇器的混合集：

混合集不僅可以包含各種屬性，而且可以包含各種選擇器

Less：

1 2 3 4 5 6 7 8

.my-hover-mixin(){//加個空括號，不執行這段代碼的編譯 ??&:hover{ ????border:1px?solid?#ddd; ??} } button{ ??.my-hover-mixin; }

CSS：

1 2 3

button:hover?{ ??border:?1px?solid?#ddd; }

不輸出混合集：

如果你想創建一個混合集，但是卻不想讓它輸出到你的樣式中，你可以在混合集的名字后面加一個括號。這句話怎么理解呢？對比以下兩段代碼：

代碼一：

Less：

1 2 3 4 5 6 7 8 9 10 11 12

.my-mixin{ ??color:black; } /*看這里*/ .my-other-mixin{ ??background:white; } .class{ ??.my-mixin; ??/*看這里*/ ??.my-other-mixin; }

CSS：

1 2 3 4 5 6 7 8 9 10 11 12

.my-mixin?{ ??color:?black; } /*看這里*/ .my-other-mixin?{ ??background:?white; } .class?{ ??color:?black; ??/*看這里*/ ??background:?white; }

代碼二：

Less：

1 2 3 4 5 6 7 8 9 10 11 12

.my-mixin{ ??color:black; } /*看這里*/ .my-other-mixin(){ ??background:white; } .class{ ??.my-mixin; ??/*看這里*/ ??.my-other-mixin; }

CSS：帶空括號的混合集并沒有編譯過來，但是可以編譯到另一個引用它的選擇器里面

1 2 3 4 5 6 7 8 9

.my-mixin?{ ??color:?black; } /*看這里*/ .class?{ ??color:?black; ??/*看這里*/ ??background:?white; }

我們還可以帶參數的調用，就像使用函數一樣

Less：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

.filter(@blur){ ??-webkit-filter:blur(@blur); ??-moz-filter:blur(@blur); ??-ms-filter:blur(@blur); ??filter:blur(@blur); } .border-radius(@radius:5px){ ??-webkit-border-radius:?@radius; ??-moz-border-radius:?@radius; ??border-radius:?@radius; } #section{ ??.border-radius; ??/*如果寫公共樣式的時候沒有設定具體的數值，引用的時候就必須設定，否則出不來效果*/ ??.filter(5px); } #footer{.border-radius(10px);}

CSS：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

#section?{ ??-webkit-border-radius:?5px; ??-moz-border-radius:?5px; ??border-radius:?5px; ??/*如果寫公共樣式的時候沒有設定具體的數值，引用的時候就必須設定，否則出不來效果*/ ??-webkit-filter:?blur(5px); ??-moz-filter:?blur(5px); ??-ms-filter:?blur(5px); ??filter:?blur(5px); } #footer?{ ??-webkit-border-radius:?10px; ??-moz-border-radius:?10px; ??border-radius:?10px; }

帶多個參數的混合

參數可以用逗號或分號分隔，但是推薦用分號分隔。

定義多個具有相同名稱和參數數量的mixins是合法的，less會使用它可以使用的屬性。如果使用mixin的時候只帶一個參數，比如.mixin(red)，這個屬性會導致所有的mixin都會強制使用這個明確的參數：

Less：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.mixin(@color)?{ ??color-1:?@color; } .mixin(@color;?@padding:?2px)?{ ??color-2:?@color; ??padding-2:?@padding; } .mixin(@color;?@padding;?@margin:?5px)?{ ??color-3:?@color; ??padding-3:?@padding; ??margin:?@margin?@margin?@margin?@margin; } h1{ ??.mixin(red); } div{ ??.mixin(green;4px); } span{ ??.mixin(blue;?6px;?8px); }

CSS：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

h1?{ ??color-1:?#ff0000; ??color-2:?#ff0000; ??padding-2:?2px; } div?{ ??color-2:?#008000; ??padding-2:?4px; ??color-3:?#008000; ??padding-3:?4px; ??margin:?5px?5px?5px?5px; } span?{ ??color-3:?#0000ff; ??padding-3:?6px; ??margin:?8px?8px?8px?8px; }

命名參數

引用mixin時可以通過參數名稱而不是參數的位置來為mixin提供參數值，任何參數都通過它的名稱來引用，而不是特定的順序

Less：

1 2 3 4 5 6 7 8 9 10 11

.mixin(@color:blue;?@padding:10px;?@margin:15px;){ ??color:@color; ??padding:@padding; ??margin:@margin; } .class1{ ??.mixin(@margin:20px;?@color:#e4393c;) } .class2{ ??.mixin(#bf6da5;?60px;) }

CSS：

1 2 3 4 5 6 7 8 9 10

.class1?{ ??color:?#e4393c; ??padding:?10px; ??margin:?20px; } .class2?{ ??color:?#bf6da5; ??padding:?60px; ??margin:?15px; }

@arguments變量

arguments在Javascript中代表所有的參數，在這里也是同樣的意思，只不過用法稍有區別。如果你不想單個單個的處理參數，這一特性是很有用的：

Less：

1 2 3 4 5 6 7 8

.box-shadow(@x:0;?@y:0;?@blur:1px;?@color:#000;){ ??-webkit-box-shadow:?@arguments; ??-moz-box-shadow:?@arguments; ??box-shadow:?@arguments; } .big-block{ ??.box-shadow(2px;?5px;) }

CSS：

1 2 3 4 5

.big-block?{ ??-webkit-box-shadow:?2px?5px?1px?#000000; ??-moz-box-shadow:?2px?5px?1px?#000000; ??box-shadow:?2px?5px?1px?#000000; }

!important關鍵字

在調用的混合集后面追加!important關鍵字，可以使混合集里面所有的屬性都繼承!important

Less：

1 2 3 4 5 6 7 8 9 10

.foo(@bg:#f00,?@color:#666){ ??background:@bg; ??color:@color; } .unimportant{ ??.foo; } .important{ ??.foo?!important; }

CSS：

1 2 3 4 5 6 7 8

.unimportant?{ ??background:?#ff0000; ??color:?#666666; } .important?{ ??background:?#ff0000?!important; ??color:?#666666?!important; }

在這里，也可以體驗一把Less在實際開發中關于提高代碼維護，給我們帶來的魅力

示例一

Less：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

@pink:#f0f; #header{ ??h2{ ????font-size:26px; ????font-weight:bold; ??} ??.sub_title{ ????color:@pink; ??} ??.study_list{ ????color:@pink+111; ??} ??p{ ????font-size:12px; ????a{ ??????text-decoration:?none; ??????&:hover{ ????????border-width:1px; ????????color:@pink+666; ??????} ????} ??} }

CSS：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

#header?h2?{ ??font-size:?26px; ??font-weight:?bold; } #header?.sub_title?{ ??color:?#ff00ff; } #header?.study_list?{ ??color:?#ff6fff; } #header?p?{ ??font-size:?12px; } #header?p?a?{ ??text-decoration:?none; } #header?p?a:hover?{ ??border-width:?1px; ??color:?#ffffff; }

示例二

Less：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

@url:"../images"; .filter(@blur){ ??-webkit-filter:blur(@blur); ??-moz-filter:blur(@blur); ??-ms-filter:blur(@blur); ??filter:blur(@blur); } .border-radius(@radius:5px){ ??-webkit-border-radius:?@radius; ??-moz-border-radius:?@radius; ??border-radius:?@radius; } #loginForm{ ??width:80%; ??margin:0?auto; ??ul{ ????li{ ??????margin:15px?0; ??????&:nth-child(2){ ????????position:relative; ??????} ??????label{ ????????color:#d4d2d2; ????????font-family:'Microsoft?Yahei'; ????????font-weight:bold; ????????font-size:1.1em; ??????} ????} ??} ??.imgBground{ ????width:100%; ????height:28vh; ????filter:url(blur.svg#blur); ????.filter(5px); ????.border-radius(10px); ????background:url('@{url}/1.jpg'); ??}

CSS:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

#loginForm?{ ??width:?80%; ??margin:?0?auto; } #loginForm?ul?li?{ ??margin:?15px?0; } #loginForm?ul?li:nth-child(2)?{ ??position:?relative; } #loginForm?ul?li?label?{ ??color:?#d4d2d2; ??font-family:?'Microsoft?Yahei'; ??font-weight:?bold; ??font-size:?1.1em; } #loginForm?.imgBground?{ ??width:?100%; ??height:?28vh; ??filter:?url(blur.svg#blur); ??-webkit-filter:?blur(5px); ??-moz-filter:?blur(5px); ??-ms-filter:?blur(5px); ??filter:?blur(5px); ??-webkit-border-radius:?10px; ??-moz-border-radius:?10px; ??border-radius:?10px; ??background:?url('../images/1.jpg'); }

詳情參考官方文檔：

http://www.css88.com/doc/less/features/#mixins-feature

本文轉自 ? frwupeng517 ? 51CTO博客，原文鏈接:http://blog.51cto.com/dapengtalk/1862989

總結

以上是生活随笔為你收集整理的Less学习笔记 -- Mixins（混合）一的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。