1. 混合器例子

// 定義一個名為 button-style 的混合器
@mixin button-style {
background-color: blue;
color: white;
padding: 10px;
border-radius: 5px;
}

// 使用這個混合器
.button {
@include button-style;
}

• 編譯後的CSS
  .button {
  background-color: blue;
  color: white;
  padding: 10px;
  border-radius: 5px;
  }

• @mixin button-style 定義了一組樣式

• @include button-style 在 .button 中調用了這組樣式

2. 帶參數的混合器例子

// 定義一個混合器，接受參數
@mixin button-style($bg-color, $font-color) {
background-color: $bg-color;
color: $font-color;
padding: 10px;
border-radius: 5px;
}

// 調用混合器時傳遞不同的參數
.button-primary {
@include button-style(blue, white);
}

.button-secondary {
@include button-style(grey, black);
}

• 編譯後的CSS
  .button-primary {
  background-color: blue;
  color: white;
  padding: 10px;
  border-radius: 5px;
  }

.button-secondary {
background-color: grey;
color: black;
padding: 10px;
border-radius: 5px;
}

• @mixin button-style($bg-color, $font-color) 定義了一個帶參數的混合器
• 每次調用混合器時，可以傳入不同的背景顏色和字體顏色，從而靈活應用

3. 混合器的條件判斷
   @mixin text-style($bold: false) {
   font-size: 16px;
   @if $bold == true {
   font-weight: bold;
   } @else {
   font-weight: normal;
   }
   }

.title-bold {
@include text-style(true);
}

.title-normal {
@include text-style(false);
}

• 編譯後的CSS
  .title-bold {
  font-size: 16px;
  font-weight: bold;
  }

.title-normal {
font-size: 16px;
font-weight: normal;
}

• @if 和 @else 用來根據傳入的參數進行條件判斷，生成不同的樣式
• text-style 混合器根據參數 true 或 false 決定字體是否加粗