首先來看如下的代碼，一個 div 元素，分别設定了上下左右的寬度高度和顔色，然後在浏覽器中打開發現四個不同的角都是一個小小的三角形如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BNTang</title>
<style>
div {
width: 0;
height: 0;
border-width: 40px 40px 40px 40px;
border-style: solid solid solid solid;
border-color: #000 #f00 #0f0 #00f;
}
</style>
</head>
<body>
<div></div>
</body>
</html> 
這個時候你想要那個角的小三角你隻需要把其它的小三角給設定為透明顔色即可如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BNTang</title>
<style>
div {
width: 0;
height: 0;
border-width: 40px 40px 40px 40px;
border-style: solid solid solid solid;
border-color: #000 transparent transparent transparent;
}
</style>
</head>
<body>
<div></div>
</body>
</html> 在企業開發當中會經常使用到像這樣的小三角，是以這個時候是不是可以把它封裝到一個混合當中
.triangle() {
width: 0;
height: 0;
border-width: 40px 40px 40px 40px;
border-style: solid solid solid solid;
border-color: #000 transparent transparent transparent;
}
div {
.triangle();
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BNTang</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div></div>
</body>
</html> 以後你要是想要那個元素變為小三角形就直接調用一下如上的混合即可實作，現在封裝的小三角的寬高顔色都是寫死的，是以可以改造為讓調用者傳入
.triangle(@width, @color) {
width: 0;
height: 0;
border-width: @width;
border-style: solid solid solid solid;
border-color: @color transparent transparent transparent;
}
div {
.triangle(200px, blue);
} 如上封裝的混合小三角隻能實作向下，那麼這個時候需要一個向上的小三角那該怎麼辦呢，複制如上的混合改一下方向？如下代碼
.triangle(@width, @color) {
width: 0;
height: 0;
border-width: @width;
border-style: solid solid solid solid;
border-color: @color transparent transparent transparent;
}
.triangle(@width, @color) {
width: 0;
height: 0;
border-width: @width;
border-style: solid solid solid solid;
border-color: transparent transparent @color transparent;
}
div {
.triangle(200px, blue);
} 通過對如上代碼的觀察發現，後定義的小三角方法覆寫的線定義的，那麼我向下的小三角不就是不能用了，那麼這個時候就可以利用 less 中的混合的比對模式來解決如上問題
混合的比對模式
- 就是通過混合的第一個字元串形參，來确定具體要執行哪一個同名混合
例如如下代碼
.triangle(@_, @width, @color) {
width: 0;
height: 0;
border-style: solid solid solid solid;
}
.triangle(Down, @width, @color) {
border-width: @width;
border-color: @color transparent transparent transparent;
}
.triangle(Top, @width, @color) {
border-width: @width;
border-color: transparent transparent @color transparent;
}
.triangle(Left, @width, @color) {
border-width: @width;
border-color: transparent @color transparent transparent;
}
.triangle(Right, @width, @color) {
border-width: @width;
border-color: transparent transparent transparent @color;
}
div {
//.triangle(Down, 80px, green);
//.triangle(Top, 80px, green);
//.triangle(Left, 80px, green);
.triangle(Right, 80px, green);
}
-
：表示通用的比對模式@_
什麼是通用的比對模式
- 無論同名的哪一個混合被比對了，都會先執行通用比對模式中的代碼
- 代碼如上