什麼是 Sass 的 Mixin（混入）？

• 定義：Mixin 是一組可重複使用的 CSS 規則，允許你將一組樣式定義成一個可重複調用的模塊。可以根據參數進行自定義，以提高代碼的重用性。
• 使用場景：當你有一些 CSS 規則在多個選擇器中需要重複使用時，Mixin 可以讓代碼更加簡潔並避免重複。

如何定義和使用 Mixin？

• 定義 Mixin：使用 @mixin 來定義一個 Mixin。可以為 Mixin 定義參數，甚至設置默認值。

  範例：

  @mixin button-style($color, $padding: 10px) {
    background-color: $color;
    padding: $padding;
    border: none;
    border-radius: 5px;
    color: white;
  }
  

• 調用 Mixin：使用 @include 來調用定義好的 Mixin。可以傳遞參數來自定義結果。

  範例：

  .primary-button {
    @include button-style(#3498db); // 使用默認的 padding
  }
  
  .secondary-button {
    @include button-style(#2ecc71, 15px); // 自定義 padding
  }
  

• 優點：

  1. 提高代碼重用性：相同的樣式定義一次即可多處使用。
  2. 參數化樣式：可以根據需求傳遞不同參數，靈活應用。
  3. 便於維護：修改 Mixin 定義，所有使用的地方都會同步更新。

什麼是 Sass 的繼承？

• 定義：繼承允許一個選擇器 "繼承" 另一個選擇器的所有樣式規則，從而避免重複書寫相同的樣式。
• 使用場景：當不同的元素需要共用大部分樣式，但也有部分自定義時，繼承可以簡化代碼。

如何使用繼承？

• 語法：使用 @extend 關鍵字來繼承一個已經定義好的選擇器。

  範例：

  .base-button {
    padding: 10px;
    border-radius: 5px;
    font-size: 16px;
    color: white;
  }
  
  .primary-button {
    @extend .base-button;
    background-color: #3498db;
  }
  
  .secondary-button {
    @extend .base-button;
    background-color: #2ecc71;
  }
  

• 注意：

  1. 繼承後，選擇器會共享同一個 CSS 規則塊，這會導致某些情況下不靈活。
  2. Mixin 比繼承更加靈活，因為 Mixin 可以帶參數，但繼承不能。

Mixin 和繼承的區別

• • 何時使用 Mixin：
  • 當樣式需要多次重用，並且需要靈活參數化時。
  • 需要產生不同變體（如不同顏色、不同間距）的時候。

• 何時使用繼承：

  • 當幾個選擇器幾乎完全共用相同的樣式時。
  • 需要保持最少的輸出 CSS 代碼時。

小結:

• Mixin 和繼承各有優劣，根據具體場景選擇適合的方式。
• 小心過度使用繼承，因為它可能導致意外的 CSS 層疊問題。
• Mixin 更加靈活，適合更複雜的樣式和自定義需求。