Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 LESS官网（中文）：http://lesscss.cn/
方式一：直接通过引入less.js文件，通过浏览器端来编译.less文件（类css文件），当然先要下载less.js文件放在项目文件中，目录就来个简单的。 —-less —-images —-js index.html
<link rel="stylesheet/less" type="text/css" href="less/style.less"> <script src="js/less-1.3.3.min.js" type="text/javascript"></script> 1212.less文件是一定要在less.js文件之前引入的。我们也可以把.js文件放在</body>的前面。
方式二：通过编译工具将.less文件编译成css文件之后，在html文件中直接引用。 常用的编译工具有（新人知道这个就好了）Koala（考拉，国人自己开发） –http://koala-app.com/index.html
其实要写的话，你直接全部按照css去写也可以。当然，如果这样写的话就不需要less了，他主要是增加了变量、混合、函数、嵌套、命名空间、作用域等方便编码的写法。 比如：
@color:red; #header { color: @color; } h2 { color: @color; } 12345671234567编译之后就是
@color:red; #header { color: red; } h2 { color: red; } 12345671234567这样是不是对于好多相同的样式设置都不用写好多遍了。
1.注释（Comments） 和js一样，单行“//”和多行“/* /”。编译时会删除“//”保留“/ */”。 2.变量（Variables）
@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header { color: @light-blue;}//编译输出#header { color: #6c94be;}12345678910123456789103.混合（Mixins）
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black;}#menu a { color: #111; .bordered;}//编译输出#menu a { color: #111; border-top: dotted 1px black; border-bottom: solid 2px black;}123456789101112131412345678910111213144.嵌套（Nested Rules）
#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; &:hover{ color:red;//&表示父级 } }}//编译输出#header { color: black;}#header .navigation { font-size: 12px;}#header .logo { width: 300px;}#header .logo:hover { color:red;}12345678910111213141516171819202122232425123456789101112131415161718192021222324255.匹配模式
.border{border: 2px solid #ccc; border-radius: 4px;}//编译会出现在css文件中，如果是.border(){}则只会引用不会编译到css文件中。 .header {.border;} //调用时一定要传参数，没有默认参数一定要带参数 .border(@width, @color, @radius){border: @width solid @color; border-radius: @radius;} .header{.border(2px, #ccc, 4px);} //带默认参数，有默认参数可以带参数或者使用默认的 .border(@width:2px, @color:#ccc, @radius: 4px){ border: @width solid @color; border-radius: @radius; } .header {.border(4px, #f00, 2px);} //@arguments 指所有参数 .border (@width:1px, @style:solid, @color:#ccc){border: @arguments;} 12345678910111213141516123456789101112131415166.地址（把地址当成常量）
// Variables@images: "../img";// Usagebody { color: #444; background: url("@{images}/white-sand.png");}1234567812345678写到这里基础写法就不介绍了，大家上官网大概看一遍API就OK了，然后在工作中慢慢写慢慢学吧。 初学的话我建议先看一遍API然后写点简单的例子，然后看看bootstrap的less源码，你就知道那些你常用到的类是怎么写的了。展示一些常用的给大家看下。
.clearfix { *zoom: 1; &:before, &:after { display: table; content: ""; line-height: 0; } &:after { clear: both; }}.ie7-inline-block() { *display: inline; /* IE7 inline-block hack */ *zoom: 1;}.text-overflow() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}// Border Radius.border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;}// Transitions.transition(@transition) { -webkit-transition: @transition; -moz-transition: @transition; -o-transition: @transition; transition: @transition;}// Opacity.opacity(@opacity) { opacity: @opacity / 100; filter: ~"alpha(opacity=@{opacity})";}12345678910111213141516171819202122232425262728293031323334353637383940414243441234567891011121314151617181920212223242526272829303132333435363738394041424344以后像这种代码就不用重复写了是不是很爽。特别是那种要写内核兼容的。
最后给大家说一下我的less文件是怎么来写的。（目录–参考bootstrap） 目录： –docs文档 –img图片 –less样式 |-variables.less变量 |-mixins.less混合 |-reset.less重置 |-layouts.less布局 |-sPRites.less图标 –js插件 小文件的话直接全部写在一个文件里就好了，不过也可以分开写，通过import导入也是一样的。
开始用less写过几个页面之后就可以看看bootstrap中less和z.less是怎么写的了。然后也可以参照他们的写法调整到自己的工作用。 z.less:http://www.aibusy.com/zless/index.html
新闻热点
疑难解答
