如何將單位應用於無單位 CSS 變數？

使用所需單位自訂無單位CSS 變數

在CSS 中，定義無單位變數的能力可以在樣式設計中提供更大的靈活性。然而，經常會遇到需要在多個地方使用不同單位的變數的情況，例如用於 calc() 運算的寬度和像素的百分比。

介紹 calc() 和單位乘法

要解決此問題，可以使用 calc() 函數將所需的單位明確加入變數中。透過將變數乘以適當的單位係數（例如 1%），可以實現所需的行為。

範例：

考慮一個 CSS 的場景變數 --mywidth 設定為 10。要將其用作寬度百分比，只需編寫：

div {
  width: calc(var(--mywidth) * 1%);
}

此計算有效地將 --mywidth 乘以 1% (0.01)，從而得到寬度值10%。

擴充案例：

除了百分比之外，您還可以使用此技術附加任何所需的單位：

• 對於像素: calc(var(--mywidth) * 1px)
• 對於度數：calc(var(--mywidth) * 1deg)
• 對於不透明度：calc(var(--mywidth) * 0.1)

示範：

以下程式碼段說明了此技術的應用：

:root {
  --a: 50;
}

.box {
  width:calc(var(--a) * 1%);
  border:calc(var(--a) * 0.5px) solid red;
  background:linear-gradient(calc(var(--a) * 0.8deg), blue 50%, green 0);
  padding:20px;
  box-sizing:border-box;
}

在此範例中，框element 示範了--a 與不同單位的使用，包括寬度百分比、邊框像素、線性漸變角度度數和填滿像素。

以上是如何將單位應用於無單位 CSS 變數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！