此篇文章发布于2011年，当时的想法与现在已有不同，不建议继续阅读。
如果你还不知道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{
-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-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
然后页面哪需要圆角，直接加上class="rounded_corners"，当然，它的引用是可以设置参数的，比如这样
.margin10(@size:10px){
margin:@size;
}
.test{
.margin10;
}
似乎很高级的样子，参数可以控制，减少了重复代码的书写，但是否实用呢？我拿之前项目里的样式比较了下，发现能拎出来，通过参数设置具体样式的几乎没有，只有几个css3的属性用这个功能还是比较OK，比如这段阴影样式
.box-shadow(@arguments){
-webkit-box-shadow:@arguments;
-moz-box-shadow:@arguments;
box-shadow:@arguments;
}
因为只要是阴影，就少不了这三句，类似的还有圆角、透明等，就不一一列举了。
然后，说说最基本的变量吧，我就一直没想通css要变量有什么用
@w100:100px;
@h100:100px;
div{
width:@w100;
height:@h100;
}
可能会说，我定义好一个变量，在不同的地方都可以直接调用，如果要修改，只需修改一次。但问题是，万一我只想改其中一个的样式，另一个别动，或者就是两个同时都需要修改。
就比如我一个页面里有2块广告区域，原先宽高是一样的，现在我要其中一个区域变大，另一个变小，这样我反而觉得定义变量增多了我的工作量。
可能又会说，LESS CSS不是支持四则运算嘛，对，我们可以这样子
@w100:100px;
@h100:100px;
div{
width:@w100 + 50px;
height:@h100 - 50px;
}
甚至还可以更2B青年一点
@w100:100px;
@h100:100px;
div{
width:(@w100 + 50px) / 2 + 75px;
height:@h100 - (100px / 2);
}
LESS CSS里的计算功能就像变量一样让我无法理解，别忘了，LESS CSS是要编译过你写的.less文件的，最终生成的还是标准的css代码。换句话说，就是你再怎么定义变量，再怎么计算，最终它生成的还是一个固定的数值，帮我们减少的只是计算这个数值的时间，但我觉得我花时间去写个运算，还不如心算一下。
当然了，LESS CSS也并非一无是处，它的嵌套功能就让我眼前一亮
<div class="test"> <div class="test1"> <div></div> </div> </div>
通常我们要给上面这三个div写样式，无非用2种方法，一种就是定义class/id，一种就是给最外层定义个class/id，然后用继承去写。而LESS CSS给了我们一种友好阅读的方式
.test{
.margin10;
@color:#4d926f;
width:@w100 + 100px;height:100px;border:1px solid red;background:@color;
&:hover,&.selected{background-color:#FFF}
/*嵌套*/
.test1{width:@w100 - 50px;height:100px;background-color:red;font-size:20px;
/*多重嵌套*/
div{width:100%;height:50px;background-color:#9F0;}
}
.test1:hover{background-color:@color}
}
相信这样的样式要查找起来，都会比较轻松，哪一层套哪一层都一清二楚，这是我感觉它很赞的功能。
总的来说，LESS CSS不是很适合用在项目中，它更适用于皮肤、模板等整体框架固定死的网站制作，比如论坛、空间。所以大家在使用LESS CSS请先考虑下这个工具是否适用，别盲目的使用，不但效率没提高，还增加了不必要的工作量。
本文转自胡尐睿丶博客园博客，原文链接：http://www.cnblogs.com/hooray/archive/2011/12/02/2272212.html，如需转载请自行联系原作者
