無單位 CSS 變數：處理單位轉換

使用 CSS 變數時，通常需要使用無單位值來保持靈活性和對錶示的控制。然而，CSS 屬性在各種情況下都需要特定的單位。本指南將示範一種使用無單位變數並將其無縫轉換為所需單位的技術。

場景：

您需要定義一個變數 --mywidth ，其中數值。但是，在 CSS 中，您希望將此變數用作元素寬度的百分比和 calc() 操作的普通數字。

解決方案：

calc() 和單位乘法：

要實現此目的，請使用calc()函數並與所需單位執行簡單的乘法。例如：

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

此方法將無單位變數--mywidth 重新調整為百分比值，符合width 屬性的要求。同樣，要將變數用作數字進行計算，請相應地調整乘數：

calc(var(--mywidth) * 1px)

範例：

考慮以下程式碼：

: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;
}

在此範例中，--a 變數一開始就無單位。在 .box 類別中， calc() 用於根據需要將其轉換為百分比、像素和度數。結果是一個具有指定尺寸、邊框寬度、漸變角度和填充的盒子。

此技術使您能夠使用無單位值定義 CSS 變量，然後將它們轉換為適當的單位，從而提供更大的靈活性和效率在您的 CSS 樣式中。