CSS 提供了條件和控制指令，讓你可以根據不同的條件來動態生成 CSS 樣式。這些指令包括 @if、@else if、@else，它們的作用類似於一般的程式語言，能夠根據條件來控制樣式的輸出，讓樣式更具彈性。跟我們學C++的時候一樣的運作原理!

一、@if、@else if、@else 的使用

@if：當條件為真時執行代碼。
@else if：當前一個 @if 條件為假且該條件為真時執行代碼。
@else：當前面的條件都不成立時執行代碼。

@if 條件 {
  // 執行的樣式
} @else if 條件 {
  // 執行的樣式
} @else {
  // 執行的樣式
}

二、實用範例

1.根據變量的值改變樣式

假設我們希望根據不同的主題來設置背景顏色，可以這樣使用條件指令：

$theme: 'dark';

body {
  @if $theme == 'light' {
    background-color: #ffffff;
    color: #000000;
  } @else if $theme == 'dark' {
    background-color: #333333;
    color: #ffffff;
  } @else {
    background-color: #f0f0f0;
    color: #333333;
  }
}

此範例對應的CSS如下:

body {
  background-color: #333333;
  color: #ffffff;
}

此範例選擇的主題是'dark',因此CSS的呈現是dark主題的

2.使用條件指令設定邊框樣式

你可以根據不同條件來設置元素的樣式，例如邊框：

$border-type: 'dashed';

.box {
  @if $border-type == 'solid' {
    border: 2px solid #3498db;
  } @else if $border-type == 'dashed' {
    border: 2px dashed #3498db;
  } @else {
    border: 2px dotted #3498db;
  }
}

對應的CSS樣式如下:

.box {
  border: 2px dashed #3498db;
}

此範例選擇的主題是'dashed',因此CSS的呈現是dashed的邊框樣式

SCSS 的條件與控制指令讓樣式定義更具動態性，允許根據變量或特定情況來調整樣式的輸出。這在大型專案中非常有用，可以直接更改樣式!
嗚哈呀哈