不要盲目的在專案中使用LESS CSS

如果你還不知道less css是什麼東西，可以看一下這篇文章，是我一朋友寫給新人看的《css——less》

不可否認，less css是個強大的工具，它彌補了css沒有變數、無法運算等一些「先天缺陷」，但它似乎給我一種錯覺，就是為了功能而實現功能。

比如它的引用功能?

.rounded_corners

#header

#footer

最終編譯後會生成如下**?

.rounded_corners

#header

#footer

它似乎彌補上了css的乙個缺陷，但我並沒發現他這樣做的目的是什麼，我完全可以直接這樣一段?

.rounded_corners

然後頁面哪需要圓角，直接加上class="rounded_corners"，當然，它的引用是可以設定引數的，比如這樣?

.margin10(@size:10px)

.test

似乎很高階的樣子，引數可以控制，減少了重複**的書寫，但是否實用呢？我拿之前專案裡的樣式比較了下，發現能拎出來，通過引數設定具體樣式的幾乎沒有，只有幾個css3的屬性用這個功能還是比較ok，比如這段陰影樣式?

.box-shadow(@arguments)

因為只要是陰影，就少不了這三句，類似的還有圓角、透明等，就不一一枚舉了。

然後，說說最基本的變數吧，我就一直沒想通css要變數有什麼用?

@w100:100px;

@h100:100px;

div

可能會說，我定義好乙個變數，在不同的地方都可以直接呼叫，如果要修改，只需修改一次。但問題是，萬一我只想改其中乙個的樣式，另乙個別動，或者就是兩個同時都需要修改。

就比如我乙個頁面裡有2塊廣告區域，原先寬高是一樣的，現在我要其中乙個區域變大，另乙個變小，這樣我反而覺得定義變數增多了我的工作量。

可能又會說，less css不是支援四則運算嘛，對，我們可以這樣子?

@w100:100px;

@h100:100px;

div

甚至還可以更2b青年一點?

@w100:100px;

@h100:100px;

div

less css裡的計算功能就像變數一樣讓我無法理解，別忘了，less css是要編譯過你寫的.less檔案的，最終生成的還是標準的css**。換句話說，就是你再怎麼定義變數，再怎麼計算，最終它生成的還是乙個固定的數值，幫我們減少的只是計算這個數值的時間，但我覺得我花時間去寫個運算，還不如心算一下。

當然了，less css也並非一無是處，它的巢狀功能就讓我眼前一亮?

通常我們要給上面這三個div寫樣式，無非用2種方法，一種就是定義class/id，一種就是給最外層定義個class/id，然後用繼承去寫。而less css給了我們一種友好閱讀的方式?

.test

/*巢狀*/

.test1

}

.test1:hover

}

相信這樣的樣式要查詢起來，都會比較輕鬆，哪一層套哪一層都一清二楚，這是我感覺它很贊的功能。

總的來說，less css不是很適合用在專案中，它更適用於**、模板等整體框架固定死的**製作，比如論壇、空間。所以大家在使用less css請先考慮下這個工具是否適用，別盲目的使用，不但效率沒提高，還增加了不必要的工作量。

出處：

不要盲目的在專案中使用LESS CSS

不要盲目的在專案中使用LESS CSS

不要盲目的在專案中使用LESS CSS

vue專案中使用less正確姿勢

相關推薦