话说，真心觉得lesscss是个神奇的存在~~它可以扩展css功能~你可以使用变量、函数、混合、继承等更方便的去编写和维护 CSS，以更少的代码完成更多的样式，非常适合程序猿们~~我也是刚刚学lesscss，整理下学习笔记~~
对了，如果各位看客没有接触过lesscss，先来这儿瞅眼：当当当当~正文开始在写lesscss之前，我们仍然需要prepros这个工具，打开prepros，打开你的编辑器（我用的是sublime text2），然后新建个less.html,再新建一个文件夹less，文件夹里面新建一个index.less，
，之后我们在index.less里头写点什么吧~~代码如下：
@import "function.less";@color: #4D926F;#header { color: @color;}h2 { color: @color;} 之后我们在prepros里面点击
，回到文件目录下，你发现了什么，哈哈，很神奇吧，多了个index.css的文件，让我们回到sublime按shift+alt+2，把index.css拖拽到新出来的空白区域，我们对比一下:
好玩吧~~less其实和css差不多，但是css我们是不能定义变量的，比如一个完整的整站都用了#4d926f这个颜色，包括边框和字体，突然有一天老板说我不喜欢#4d926f了，改成#ccc吧，你就要把之前#4d926f的地方找到，改成#ccc，但是如果你之前用less去定义好了一个变量，比如@sitecolor:#4d926f;要改什么颜色直接改这个变量就可以了~~锵锵锵~~是不是很方便~~\(≧▽≦)/~
我们继续在index.less里面写个小例子，代码如下：
.list{ border: #f09 solid 1px; list-style: none; padding: 0; li{ border: #ccc solid 1px; margin: 10px; }} 然后点一下右边的index.css，哇~~我们发现它的代码变成了下面的样子: .list { border: #f09 solid 1px; list-style: none; padding: 0;}.list li { border: #ccc solid 1px; margin: 10px;} 我们之前写css，如果.list里面的li，我们必须.list li {} 这样虽然没什么难度，但是语法看起来并不是一个整体，less提供了语法嵌套，我们可以直接写： .list{ li{} a{} } OK，继续跟我走~~~下面让我们用lesscss做个圆角效果~我们在刚刚的less文件夹里新建个function.less，然后敲上如下代码：
.border-radius(@radius: 3px){ border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } 之后回到index.less，在最上面加上@import "function.less";再把list重新定义一下，代码如下： @import "function.less";.list{ width: 500px; border: #f09 solid 1px; list-style: none; padding: 0; .border-radius(10px); li{ border: #ccc solid 1px; .border-radius(); margin: 10px; }} 让我们看看index.css发生了什么变化，代码如下：
.list { width: 500px; border: #f09 solid 1px; list-style: none; padding: 0; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}.list li { border: #ccc solid 1px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin: 10px;} 运行看看效果吧~~
OK啦， less可以处理一些常用的 CSS3 处理效果，我这里就整理出来一个，还有其他的方块阴影啊，元素过渡效果啊，颜色计算啊这些，有兴趣的可以百度看看，自己写写~~ 挺有意思的，对吧~~ 师父，你教我的lesscss我整理完咯~~~