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版本。
好了就解釋到這里了。
最后做個總結:
-
less 最新版本不支持直接寫 / 做為除法運算。
-
EasyLess 插件新版本跟隨less 變化,因此無法直接編譯除法
-
解決方案: 加上小括號即可。 比如 width: (100px / 10);
同學們發現,很多解決方案很簡單,但是為什么會這樣,反而更麻煩,所以,學習道路學無止境呀~~~
感謝各位小伙伴,如果有錯誤的地方還請各位同學給予批評指正哈~~~