CSS 逐步值數學函式現已在 Baseline 2024 中推出

Rachel Andrew

所有主要引擎現在都支援 CSS 逐步值數學函式：round()、mod() 和 rem()。

階梯值函式會根據另一個步驟值，轉換指定值。

round() 函式

round() 函式的值包括四捨五入、四捨五入的間隔，以及選用的捨入策略。 這個值會根據四捨五入策略進位至最接近的四捨五入的整數倍數。

要四捨五入的值或圓角間隔，應為 CSS 自訂屬性。雖然這兩個值對編碼都很有效，但如果您自行計算該值，小數點就不太會。

下列 CSS 會將 --my-font-size 的值無條件進位為 1rem 的間隔。

font-size: round(var(--my-font-size), 1rem);

預設的捨入策略為 nearest。上一個包含四捨五入策略的範例如下：

font-size: round(nearest,var(--my-font-size), 1rem);

捨入策略可能的值如下：

• up：等同於 JavaScript Math.ceil() 方法。將值無條件進位為最接近的整數 (捨入間隔)。
• down：等同於 JavaScript Math.floor() 方法。將值向下四捨五入至最接近的整數。
• nearest (預設)：與 JavaScript Math.round() 相同。將值向上或向下四捨五入至最接近的捨入間隔整數。
• to-zero：等同於 JavaScript Math.trunc() 方法。將值四捨五入至最接近的捨入間隔中最接近的整數倍數。

如要進一步瞭解 round()，請參閱 Dan Wilson 的《The New CSS Math: round()》。

rem() 和 mod() 函式

rem() 和 mod() CSS 函式的運作方式與 JavaScript 其餘運算子 (%) 類似。這兩者會採用兩個值，第一個 (除法) 除以第二個 (除數)，然後傳回餘數。

margin: rem(18px, 5px); /* returns 3px */

這兩個函式的差異在於 rem() 一律採用被除數的正負號，因此如果第一個值為正數，回傳值會是正數。mod() 函式會用除數的正負號。

如要進一步瞭解 rem() 和 mod()，請參閱 Dan Wilson 的 The New CSS Math: rem() 和 mod()。