使用 CSS `calc()` 屬性時如何避免較少的編譯器錯誤？

Les 編譯器誤解CSS calc() 屬性

某些Less 編譯器（包括OrangeBits 和dotless）會錯誤地轉換CSS calc () 表達式。例如，表達式「width: calc(100% - 250px - 1.5em)」被錯誤地轉換為「width: calc(-151.5%)」。

Less 3.00 及更高版本的解決方案

在 Less 3.00 以上版本中，編譯器不再自動計算表達式在 calc() 內。此變更消除了使用 calc() 時手動介入的需要。

早期Less 版本中的解決方案

對於3.00 以下的Less 版本，使用者可以透過括起來來阻止自動計算~ 運算符中的calc() 表達式。例如：

body { width: calc(~"100% - 250px - 1.5em"); }

此外，Less 1.4.0 版本引入了 strictMaths 選項，該選項要求所有 Less 計算都用括號括起來。此選項可確保預設情況下正確處理 calc() 表達式。

以上是使用 CSS `calc()` 屬性時如何避免較少的編譯器錯誤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！