不要盲目的在项目中使用LESS CSS-CFANZ编程社区

　如果你还不知道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"，当然，它的引用是可以设置参数的，比如这样

`.margin` `10` `(@` `size` `:` `10px` `){` `margin` `:@size;` `}` `.test{` `.margin` `10` `;` `}`

　　似乎很高级的样子，参数可以控制，减少了重复代码的书写，但是否实用呢？我拿之前项目里的样式比较了下，发现能拎出来，通过参数设置具体样式的几乎没有，只有几个css3的属性用这个功能还是比较OK，比如这段阴影样式

`.box-shadow(@arguments){` `-webkit-box-shadow:@arguments;` `-moz-box-shadow:@arguments;` `box-shadow:@arguments;` `}`

　　因为只要是阴影，就少不了这三句，类似的还有圆角、透明等，就不一一列举了。

　　然后，说说最基本的变量吧，我就一直没想通css要变量有什么用

`@w` `100:` `100px` `;` `@h` `100:` `100px` `;` `div{` `width` `:@w` `100` `;` `height` `:@h` `100` `;` `}`

　　可能会说，我定义好一个变量，在不同的地方都可以直接调用，如果要修改，只需修改一次。但问题是，万一我只想改其中一个的样式，另一个别动，或者就是两个同时都需要修改。

　　就比如我一个页面里有2块广告区域，原先宽高是一样的，现在我要其中一个区域变大，另一个变小，这样我反而觉得定义变量增多了我的工作量。

　　可能又会说，LESS CSS不是支持四则运算嘛，对，我们可以这样子

`@w` `100:` `100px` `;` `@h` `100:` `100px` `;` `div{` `width` `:@w` `100` `+` `50px` `;` `height` `:@h` `100` `-` `50px` `;` `}`

　　甚至还可以更2B青年一点

`@w` `100:` `100px` `;` `@h` `100:` `100px` `;` `div{` `width` `:(@w` `100` `+` `50px` `) /` `2` `+` `75px` `;` `height` `:@h` `100` `- (` `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{` `.margin` `10` `;` `@` `color` `:` `#4d926f` `;` `width` `:@w` `100` `+` `100px` `;` `height` `:` `100px` `;` `border` `:` `1px` `solid` `red` `;` `background` `:@color;` `&:hover,&.selected{` `background-color` `:` `#FFF` `}` `/嵌套/` `.test` `1` `{` `width` `:@w` `100` `-` `50px` `;` `height` `:` `100px` `;` `background-color` `:` `red` `;` `font-size` `:` `20px` `;` `/多重嵌套/` `div{` `width` `:` `100%` `;` `height` `:` `50px` `;` `background-color` `:` `#9F0` `;}` `}` `.test` `1:` `hover{` `background-color` `:@color}` `}`