LESS 中 Mixin 的用途是什麼？

---

在 LESS 中，mixin 提供了一種方法來組合一組 CSS 屬性並在樣式表中的不同規則集中重用它們。當我們在規則集中包含 mixin 時，mixin 中定義的所有 CSS 屬性都將新增到包含 mixin 的規則集中。

透過定義 mixin，開發人員可以將相關的樣式組合在一起並將其應用於多個選擇器，從而更容易維護網站或應用程式的一致性樣式。

讓我們透過下面的示例來理解它。這樣你就可以更清楚地瞭解 Mixin 了。

語法

使用者可以按照以下語法在 LESS 中使用 mixin。

.mixin-name {
} 
.selector {
   .mixin-name();
}

在上面的語法中，“.mixin-name”是 mixin 的名稱，我們可以在塊內定義任何我們想要包含的 CSS 屬性。

“.selector”是我們想要包含 mixin 的選擇器，我們透過呼叫其名稱後跟 () 來包含 mixin。

Mixin 的特性

Mixin 是 LESS 的一個強大功能，它為開發人員提供了許多好處：

帶括號的 Mixin

我們還可以將引數傳遞給 mixin 以自定義其行為：

.mixin-name(@arg1, @arg2) {
   /* CSS properties using @arg1 and @arg2 */
} 
.selector {
   .mixin-name(value1, value2);
}

巢狀 Mixin

巢狀 mixin 允許我們在其他 mixin 中使用 mixin。這有助於保持程式碼井井有條且更具模組化。

這是一個在 LESS 中巢狀 mixin 的示例：

// Define a mixin for setting font properties
.font-properties(@size: 14px, @weight: normal, @style: normal, @line-height: 1.5) {
   font-size: @size;
   font-weight: @weight;
   font-style: @style;
   line-height: @line-height;
} 
// Define a mixin for setting text properties
.text-properties(@color: #333, @align: left, @decoration: none) {
   color: @color;
   text-align: @align;
   text-decoration: @decoration;  
   // Use the .font-properties mixin to set font properties within the .text-properties mixin
   .font-properties();
} 
// Use the .text-properties mixin within the h1 selector
h1 {
   .text-properties(@color: red, @size: 24px);
}

Mixin 中的選擇器

LESS 中的 Mixin 允許開發人員不僅在規則集中包含屬性，還包含選擇器。這是一個例子：

.hover-effect() { 
   &:hover {
      background-color: #f7f7f7; color: #333; 
   } 
}
.btn {
   .hover-effect(); 
   background-color: #333; 
   color: #fff; 
}

示例 1

在這個示例中，“.bordered” mixin 為元素定義了一組邊框樣式。然後，我們將此 mixin 包含在其他選擇器中，例如 #menu a 和 .post a，以將這些邊框樣式應用於這些元素。

在輸出中，使用者可以看到結果中 #menu a 和 .post a 都具有在 .bordered mixin 中定義的相同邊框樣式，以及在這些選擇器中定義的任何其他樣式。

.bordered {
   border-top: 1px solid red;
   border-bottom: 2px solid black;
} 
#menu a {
   color: blue;
   .bordered();
} 
.post a {
   color: red;
   .bordered();
}

輸出

#menu a {
   color: blue;
   border-top: 1px solid red; 
   border-bottom: 2px solid black;
} 
.post a {
   color: red;
   border-top: 1px solid red; 
   border-bottom: 2px solid black;
}

示例 2

在下面的示例中，我們定義了一個名為 .box-shadow 的 mixin，其中包含盒子陰影的一組屬性。此 mixin 有四個引數：@x、@y、@blur 和 @color，它們使我們能夠自定義盒子陰影的屬性，例如 x 和 y 偏移量、模糊半徑和顏色。

之後，我們透過呼叫它並傳遞引數的值，在其他選擇器中使用了 .box-shadow mixin。我們在兩個不同的選擇器 .button 和 .card 中使用了 .box-shadow mixin。在 .button 選擇器中，我們為所有四個引數傳遞了特定值。相反，在 .card 選擇器中，我們只為前三個引數傳遞了值，並使用 #000 作為 @color 引數的預設值。

在輸出中，使用者可以看到 .button 和 .card 選擇器都具有不同屬性的盒子陰影。

.box-shadow (@x: 0, @y: 0, @blur: 5px, @color: #000) {
   -webkit-box-shadow: @x @y @blur @color;
   -moz-box-shadow: @x @y @blur @color;
   box-shadow: @x @y @blur @color;
}
.button {
   background-color: #fff;
   .box-shadow(2px, 2px, 10px, #ccc);
} 
.card {
   background-color: #f5f5f5;
   .box-shadow(4px, 4px, 20px);
}

輸出

.button {
   background-color: #fff;
   -webkit-box-shadow: 2px 2px 10px #ccc;
   -moz-box-shadow: 2px 2px 10px #ccc;
   box-shadow: 2px 2px 10px #ccc;
} 
.card {
   background-color: #f5f5f5;
   -webkit-box-shadow: 4px 4px 20px #000;
   -moz-box-shadow: 4px 4px 20px #000;
   box-shadow: 4px 4px 20px #000;
}

示例 3

在這個示例中，我們演示了在 mixin 中使用 id 選擇器。我們定義了一個名為 #primary_button() 的 mixin，它設定了一些基本的按鈕樣式，包括懸停狀態。然後，我們在兩個不同的選擇器中使用此 mixin：.button 和 .nav-link。這些選擇器將具有相同的按鈕樣式，包括懸停狀態。

#primary_button mixin 為按鈕元素定義了一組屬性，包括背景顏色、字型顏色、邊框和填充。它還包括一個懸停狀態，當滑鼠懸停在按鈕上時會更改背景和字型顏色。

使用者可以在輸出中注意到 .button 和 .nav-link 選擇器都具有相同的按鈕樣式，包括懸停狀態，因為它們使用了 #primary_button mixin。

#primary_button() {
   background-color: blue;
   color: white;
   border: none;
   padding: 10px 20px;
   &:hover {
      background-color: white;
      color: blue;
   }
} 
.button {
   #primary_button();
} 
.nav-link {
   #primary_button();
   text-decoration: none;
}

輸出

.button {
   background-color: blue;
   color: white;
   border: none;
   padding: 10px 20px;
}
.button:hover {
   background-color: white;
   color: blue;
} 
.nav-link {
   background-color: blue;
   color: white;
   border: none;
   padding: 10px 20px;
   text-decoration: none;
}
.nav-link:hover {
   background-color: white;
   color: blue;
}

使用者學習瞭如何定義 mixin 以及如何透過將它們包含在不同的選擇器中以及傳遞引數來自定義其屬性來使用它們。

提供的示例演示瞭如何使用 mixin 將邊框樣式、盒子陰影和按鈕樣式應用於不同的選擇器，並展示瞭如何將 mixin 與 id 選擇器一起使用以將相同的按鈕樣式應用於不同的選擇器。

透過理解提供的示例，使用者可以在其專案中應用 mixin 並從其靈活性和可重用性中受益。