如何靈活地使用無單位CSS 變數

無單位CSS 變數提供了儲存數值的能力，這些數值可以在整個樣式表中方便使用。然而，可能會出現這樣的情況：您希望在不同的上下文中使用相同的變量，需要不同的單位，例如百分比或像素。

這種困境的一個例子是設定一個值為 10 的 CSS 變量，但是需要在一個實例中將其用作百分比，並在另一個實例中將其用作普通數字進行計算。

解決方案在於利用 calc() 函數。透過在 calc() 函數中執行變數與所需單位的簡單乘法，我們可以實現所需的靈活性。

例如，將值為10 的變數--mywidth 轉換為百分比，只需使用：

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

這將導致width 屬性被設定為10%，完全符合預期.

這種方法的多功能性擴展到各種單位，允許您在同一樣式表中所需的百分比、像素或任何其他測量單位之間無縫切換。

為了說明這一點，請考慮以下程式碼片段：

: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 用於定義各種屬性，包括寬度、邊框、背景和填充。透過利用 calc() 函數中的單位，可以根據 --a.