• 根據變數動態設置字體大小
  $font-size: large;

p {
@if $font-size == small {
font-size: 12px;
} @else if $font-size == medium {
font-size: 16px;
} @else if $font-size == large {
font-size: 20px;
} @else {
font-size: 14px; // 默認大小
}
}

• 根據設備類型設置不同的邊距
  $device: tablet;

.container {
@if $device == desktop {
margin: 20px;
} @else if $device == tablet {
margin: 15px;
} @else {
margin: 10px; // 手機默認邊距
}
}

• 使用條件語句控制背景顏色
  $theme: dark;

body {
@if $theme == light {
background-color: white;
color: black;
} @else if $theme == dark {
background-color: black;
color: white;
} @else {
background-color: gray;
color: black;
}
}

• 使用條件語句設計響應式網格
  $screen-width: 800px;

.container {
display: flex;
flex-wrap: wrap;

@if $screen-width > 1200px {
.item {
width: 25%; // 桌面顯示 4 列
}
} @else if $screen-width > 800px {
.item {
width: 50%; // 平板顯示 2 列
}
} @else {
.item {
width: 100%; // 手機顯示 1 列
}
}
}

• $screen-width: 800px;：設置變數 $screen-width，模擬當前銀幕寬度為 800px
  .container {}：選擇 .container，這是包含多個項目的容器
  display: flex;：設置 .container 為 flexbox 布局，方便控制內部項目的排列方式
  flex-wrap: wrap;：設置容器中的項目自動換行
  @if $screen-width > 1200px {}：如果銀幕寬度大於 1200px，設置 .item 的寬度為 25%（即一行顯示 4 列）
  @else if $screen-width > 800px {}：如果銀幕寬度大於 800px 且小於 1200px，設置 .item 的寬度為 50%（即一行顯示 2 列）
  @else {}：如果銀幕寬度小於 800px，設置 .item 的寬度為 100%（即一行顯示 1 列）