CSS3的calc在Less檔案中不起作用

2021-10-02 18:16:24 字數 572 閱讀 1635

less 中使用 css3 的calc函式不起作用,比如

width

:calc

(100% + 50px)

;

但編譯後的結果是

width

:calc

(150%)

;

原因:

跟 less 的語法衝突了,less 把calc的引數當作表示式執行了。

解決方案:

使用 less 的轉義字元~。

具體用法見

正確寫法示例:

width

:calc

(~"100% + 50px"

);

複雜邏輯:

@extra

:50px;

.test

.test2

+ 3rem")

;}

編譯後的css:

.test

.test2

參考文章:

CSS3中的calc 函式以及在less中的使用

在css3中我們可以通過calc 函式來動態計算長度值,如 div 它的語法是 calc expression expression引數是必須的,它是乙個數學表示式,結果將採用運算後的返回值。使用calc 函式時需要注意的點 更詳細的介紹見這裡 calc 瀏覽器的支援情況 如下less定義的兩個變數...

css3 中的calc用法

calc 函式用於動態計算長度值。1.需要注意的是,運算子前後都需要保留乙個空格,例如 width calc 100 10px 2.任何長度值都可以使用calc 函式進行計算 3.calc 函式支援 運算 4.calc 函式使用標準的數 算優先順序規則 calc是css3中的計算,ie10 瀏覽器支...

CSS3中 的 calc 函式

css3 的 calc 函式。這裡的意思是設定寬度比100 的寬度少30px。calc 函式用於動態計算長度值。calc 函式支援 運算 calc 函式使用標準的數 算優先順序規則 在less中使用以下樣式寬度計算錯誤 width calc 100 30px 計算出來是 width 70 分析 px...