首頁 > web前端 > css教學 > 如何防止 LESS CSS 修改 `calc()` 表達式?

如何防止 LESS CSS 修改 `calc()` 表達式?

DDD
發布: 2024-12-07 22:54:17
原創
332 人瀏覽過

How Can I Prevent LESS CSS from Modifying `calc()` Expressions?

克服LESS CSS Calc() 編譯問題

在嘗試在LESS 程式碼中使用calc() 時,開發人員可能會遇到以下問題: LESS 編譯器改變計算,導致不正確的輸出。例如,以下程式碼:

width: calc(100% - 200px);
登入後複製

呈現為:

width: calc(-100%);
登入後複製

要解決此問題,可以在 LESS 中使用轉義字串。這種方法允許將 calc() 表達式視為字串,從而防止編譯器對其進行操作。

width: ~"calc(100% - 200px)";
登入後複製

這可以確保最終輸出與原始程式碼保持一致。此外,可以將Less 數學與轉義字串結合起來,如下所示:

width: calc(~"100% - 15rem +" (10px+5px) ~"+ 2em");
登入後複製

這將編譯為:

width: calc(100% - 15rem + 15px + 2em);
登入後複製

Less 預設情況下用空格連接值,從而啟用轉義字串和計算結果的無縫整合。實作此技術可以有效地停用 LESS 對 calc() 表達式的覆寫。

以上是如何防止 LESS CSS 修改 `calc()` 表達式?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板