為什么在使用LESS 除法計算時會出問題


hello,各位小伙伴們好,最近一直有小伙伴問我為什么寫Less的時候,發現除法有了問題,在生成的css文件中,不給我們輸出正確結果了。




直接拋結論:

 LESS 版本升級,EasyLess插件 新版本跟隨,不支持直接除法運算符引起的

解決方案:

 除法寫法變化  ./   或者    加上小括號(推薦)

肯定很多小伙伴會有疑惑,為啥會有這個問題,和大家拓展下:

2. less版本變化


最新的版本less 進入 4.0時代。

less關於除法有哪些變化呢?

來看下less 官網解釋:


less 官網解釋


划紅線部分翻譯下(我也是有道翻譯的,嘿嘿)

parents -division(4.0默認)-使用/運算符在括號外不執行除法(但可以使用  ./ 運算符  ./  在括號外強制執行除法)

簡單解釋:

1. 就是 進入4.0版本后, 除法運算符如果在括號外面,不把他當人。。不是,當除法運算符看了。

2. 如果在小括號內可以看做是除法運算, 或者 使用 ./ 強制做除法運算

 

參考文檔:http://lesscss.org/usage/#less-options-math

 

2. Easy Less 版本問題


雖然less因為版本有問題,但是好多同學發現自己vscode通過esayless編譯沒啥問題呢?

是因為easy less 版本問題的,在一些老版本能給正常編譯的。

但是新版的easy less (最新 V1.7.2) 就無法編譯了。來pink老師給大家解釋下原因。

less 4.0 模式是 always模式。

easyless 從 1.7.0開始支持的也是  4.0 的 always模式,簡單說,就是跟隨了最新的less版本。

好了就解釋到這里了。

 

最后做個總結:

  1. less 最新版本不支持直接寫 / 做為除法運算。
  2. EasyLess 插件新版本跟隨less 變化,因此無法直接編譯除法
  3. 解決方案: 加上小括號即可。  比如     width: (100px / 10);

同學們發現,很多解決方案很簡單,但是為什么會這樣,反而更麻煩,所以,學習道路學無止境呀~~~

感謝各位小伙伴,如果有錯誤的地方還請各位同學給予批評指正哈~~~

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM