CSS 原生變數可以在媒體查詢中使用嗎？

在媒體查詢中使用 CSS 原生變數

CSS 原生變數是一個強大的工具，用於根據在CSS。但是，在媒體查詢中使用這些變數存在限制。

嘗試在媒體查詢中使用 CSS 變數時會出現問題。例如，考慮以下程式碼：

:root {
  --mobile-breakpoint: 642px;
}

@media (max-width: var(--mobile-breakpoint)) {

}

此程式碼旨在定義媒體查詢，當視窗寬度小於或等於 --mobile-breakpoint 變數中儲存的值時套用樣式。然而，這種方法不起作用，因為 CSS 變數不能在媒體查詢中使用。

CSS 規格明確指出，用於存取 CSS 變數的 var() 函數只能在屬性值中使用。它不能用在屬性名稱、選擇器或媒體查詢中。施加此限制是為了確保 CSS 變數用於控制樣式值的預期目的，而不是修改 CSS 文件的結構或功能。

要解決此問題，可以使用 CSS 預處理器，例如薩斯或更少。這些預處理器透過將程式碼轉換為有效的 CSS 來支援在媒體查詢中使用變數。使用預處理器，前面的程式碼可以重寫為：

$mobile-breakpoint: 642px;

@media (max-width: $mobile-breakpoint) {

}

透過使用預處理器，$mobile-breakpoint 變數可以在媒體查詢中使用，允許基於定義的所需樣式行為變數。

以上是CSS 原生變數可以在媒體查詢中使用嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！