一、控制邏輯的應用場景

SCSS 具備強大的條件控制語法，讓我們能根據特定情況來生成不同的樣式。這在大型專案或需要動態生成樣式的情況下非常實用，例如根據裝置尺寸、不同的狀態（hover、active 等）來調整樣式。

$screen-size: large;

body {
  @if $screen-size == small {
    font-size: 12px;
  } @else if $screen-size == medium {
    font-size: 16px;
  } @else if $screen-size == large {
    font-size: 20px;
  } @else {
    font-size: 14px;
  }
}

根據裝置尺寸調整字體大小，這段 SCSS 會根據 $screen-size 變量的值來設定不同的字體大小。

二、動態主題系統設計

利用 SCSS 的條件控制與循環，我們可以建立一個動態主題系統，方便快速切換網站的顏色風格，為網站提供更好的可維護性與一致性。

// 定義主題顏色(light跟dark)
$themes: (
  light: (
    primary: #3498db,
    secondary: #2ecc71,
    background: #ffffff,
    text: #333333
  ),
  dark: (
    primary: #2980b9,
    secondary: #27ae60,
    background: #2c3e50,
    text: #ecf0f1
  )
);

@each $theme-name, $theme-values in $themes {
  .#{$theme-name}-theme {
    @each $property, $value in $theme-values {
      --#{$property}-color: #{$value};
    }
    background-color: var(--background-color);
    color: var(--text-color);
  }
}

編輯之後會呈現以下效果:

按按鈕前

按下去後，是不是很有趣!