不要盲目的在項目中使用LESS CSS

1、如果你還不知道 LESS CSS 是什么東西， 可以看一下這篇文章， 是我一朋友寫給新 人看的CSS LESS不可否認， LESS CSS 是個強大的工具，它彌補了css 沒有變量、無法運算等 一些“先天缺陷”，但它似乎給我一種錯覺，就是為了功能而實現(xiàn)功能。比如它的引用功能.rounded_corners-moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius: 8px;#header.rounded_corners;#footer.rounded_corners;最終編譯后會生成如下代碼.rounded_corners-

2、moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius: 8px;#header-moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius: 8px;#footer-moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius: 8px;它似乎彌補上了 css 的一個缺陷，但我并沒發(fā)現(xiàn)他這樣做的目的是什么，我完 全可以直接這樣一段.rounded_corners-moz-border-ra

3、dius: 8px;-webkit-border-radius: 8px;border-radius: 8px;然后頁面哪需要圓角，直接加上class=rounded_corners，當然，它的引用是 可以設(shè)置參數(shù)的，比如這樣.margin10(size:10px)margin:size;.test.margin10;似乎很高級的樣子，參數(shù)可以控制，減少了重復代碼的書寫，但是否實用呢？ 我拿之前項目里的樣式比較了下，發(fā)現(xiàn)能拎出來，通過參數(shù)設(shè)置具體樣式的幾乎沒 有，只有幾個 css3 的屬性用這個功能還是比較 OK，比如這段陰影樣式.box-shadow(arguments)-webkit-bo

4、x-shadow:arguments;-moz-box-shadow:arguments;box-shadow:arguments;因為只要是陰影，就少不了這三句，類似的還有圓角、透明等，就不一一列舉 了。然后，說說最基本的變量吧，我就一直沒想通 css 要變量有什么用w100:100px;h100:100px;divwidth:w100;height:h100;可能會說，我定義好一個變量，在不同的地方都可以直接調(diào)用，如果要修改， 只需修改一次。但問題是，萬一我只想改其中一個的樣式，另一個別動，或者就是 兩個同時都需要修改。就比如我一個頁面里有 2 塊廣告區(qū)域，原先寬高是一樣的，現(xiàn)在我要其中一

5、個 區(qū)域變大，另一個變小，這樣我反而覺得定義變量增多了我的工作量?？赡苡謺f， LESS CSS 不是支持四則運算嘛，對，我們可以這樣子w100:100px;h100:100px;divwidth:w100 + 50px;height:h100 - 50px;甚至還可以更 2B 青年一點w100:100px;h100:100px;divwidth:(w100 + 50px) / 2 + 75px;height:h100 - (100px / 2);LESS CSS 里的計算功能就像變量一樣讓我無法理解，別忘了， LESS CSS 是 要編譯過你寫的.less 文件的，最終生成的還是標準的css

6、 代碼。換句話說，就是你 再怎么定義變量，再怎么計算，最終它生成的還是一個固定的數(shù)值，幫我們減少的 只是計算這個數(shù)值的時間，但我覺得我花時間去寫個運算，還不如心算一下。當然了， LESS CSS 也并非一無是處，它的嵌套功能就讓我眼前一亮通常我們要給上面這三個div 寫樣式，無非用 2 種方法，一種就是定義 class/id， 一種就是給最外層定義個 class/id，然后用繼承去寫。而 LESS CSS 給了我們一種 友好閱讀的方式.test.margin10;color:#4d926f;width:w100 + 100px;height:100px;border:1px solid red;background:color;&:hover,&.selectedbackground-color:#FFF/*嵌套*/.test1width:w100 - 50px;height:100px;background-color:red;font-size:20px; /*多重嵌套*/divwidth:100%;height:50px;background-color:#9F0; .test1:hoverbackground-color:color相信這樣的樣式要查找起來，都會比較輕松，哪一層套哪一層都一清二楚，這 是我感覺它很贊的功能。總的來說， LES