如何防止 Less 編譯器錯誤地評估 CSS `calc()` 屬性？

Less 和CSS Calc() 屬性：阻礙激進編譯

Less 編譯器，例如OrangeBits 和dotless，可能會嘗試編譯和評估CSS calc() 屬性，導致不正確的結果。本文探討了防止這種行為並維護所需 CSS 樣式的方法。

Less 的預設行為

較少用於主動計算 calc() 中的表達式，從而導致錯誤的結果。例如，body { width: calc(100% - 250px - 1.5em); } 將被錯誤地翻譯為 body { width: calc(-151.5%); }.

Less的解決方案

執行以下操作：

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

透過使用 ~ 運算符，您可以向 Less 發出訊號以忽略期間的表達式編譯。

Less v3.00 和的解法稍後

預設情況下，Less 不再自動計算 calc() 中的表達式。因此，對於 Less v3.00 及更高版本，不需要採取任何特定操作來防止激進編譯。

嚴格數學選項

在 Less 1.4.0 中，有一個strictMaths 選項，要求所有 Less 計算都括在號中。此選項可確保 calc() 無需任何修改即可按預期工作。預設情況下，Less 1.4.0 的發布版本中此選項是關閉的。

以上是如何防止 Less 編譯器錯誤地評估 CSS `calc()` 屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！