CSS 中的條件語句：另一種方法

在現代Web 開發中，基於動態變數無縫調整使用者體驗至關重要。 CSS 雖然在樣式方面功能強大，但缺乏 if/else 等傳統條件語句。然而，有幾種替代方法可以實現類似的功能。

一種方法是利用類別。透過使用特定類別操作 HTML 元素，您可以根據這些類別的存在或不存在來套用不同的樣式。考慮以下範例：

Text
Text

p.normal {
  background-position: 150px 8px;
}
p.active {
  background-position: 4px 8px;
}

CSS 預處理器，如 Sass，也提供條件條件的進階功能。包含的條件語句允許更複雜的邏輯：

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  }
  @else if $type == matador {
    color: red;
  }
  @else if $type == monster {
    color: green;
  }
  @else {
    color: black;
  }
}

現代 CSS 中引入的自訂屬性為動態樣式提供了寶貴的工具。它們的行為類似於變量，並在運行時進行評估：

:root {
  --main-bg-color: brown;
}

.one {
  background-color: var(--main-bg-color);
}

.two {
  background-color: black;
}

對於伺服器端控制，使用 PHP 等語言預處理樣式表可以進行動態修改：

p {
  background-position: = (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}

雖然 CSS 缺乏傳統的 if/else 語法，但這些替代方案提供了靈活有效的方法來創建動態和響應式使用者介面。