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

1、如果你还不知道 LESS CSS 是什么东西， 可以看一下这篇文章， 是我一朋友写给新 人看的CSS LESS不可否认， LESS CSS 是个强大的工具，它弥补了css 没有变量、无法运算等 一些“先天缺陷”，但它似乎给我一种错觉，就是为了功能而实现功能。比如它的引用功能.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 的一个缺陷，但我并没发现他这样做的目的是什么，我完 全可以直接这样一段.rounded_corners-moz-border-ra

3、dius: 8px;-webkit-border-radius: 8px;border-radius: 8px;然后页面哪需要圆角，直接加上class=rounded_corners，当然，它的引用是 可以设置参数的，比如这样.margin10(size:10px)margin:size;.test.margin10;似乎很高级的样子，参数可以控制，减少了重复代码的书写，但是否实用呢？ 我拿之前项目里的样式比较了下，发现能拎出来，通过参数设置具体样式的几乎没 有，只有几个 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;可能会说，我定义好一个变量，在不同的地方都可以直接调用，如果要修改， 只需修改一次。但问题是，万一我只想改其中一个的样式，另一个别动，或者就是 两个同时都需要修改。就比如我一个页面里有 2 块广告区域，原先宽高是一样的，现在我要其中一

5、个 区域变大，另一个变小，这样我反而觉得定义变量增多了我的工作量。可能又会说， 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、 代码。换句话说，就是你 再怎么定义变量，再怎么计算，最终它生成的还是一个固定的数值，帮我们减少的 只是计算这个数值的时间，但我觉得我花时间去写个运算，还不如心算一下。当然了， 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