less 中的命名引數
阿新 • • 發佈：2018-12-09
下圖是我的 html 結構：頁面上已經引入了一個6.命名引數.css檔案(我是用考拉進行編譯的)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/6.命名引數.css" /> </head> <body> <div class="wrap"> wrap <div class="inner"> inner1 </div> </div> </body> </html>
下面是我的less檔案程式碼(提供複製，主要看下圖)
.juzhong(@s,@c,@w){ left: 0; right: 0; top: 0; bottom: 0; margin: auto; border-style:@s ; border-color:@c ; border-width:@w ; } .wrap{ position: relative; width: 400px; height: 400px; background: deeppink; .juzhong(solid,blue,10px); .inner{ position: absolute; width: 200px; height: 200px; background: pink; .juzhong(10px,black,solid); } }
可以看到我們定義的混合的形參列表順序是：border-style，border-color，border-width
顯然，2的順序和我們定義的混合形參列表1的順序是一樣的
然後我們看看3，順序完全亂的，那我們編譯完會造成什麼呢？看下圖：
從圖中可以明顯看到，因為呼叫混合時我們的實參列表順序是錯誤的，所以到最後編譯完得出來的CSS也是錯誤的！！！
我們如果就想亂寫順序怎麼辦呢？終於到解決辦法了！！！
我們可以通過命名引數 來解決 ：我們再呼叫混合時在引數前面加上他自己的引數名（形參名）中間用逗號(，)隔開
如：.juzhong(@c:black,@s:solid,@w:10px)
這樣引數沒有放置值的任何順序，它們可以通過名稱來進行引用。