近期因工作需要，项目中运用Less css进行代码编写，从http://linder0209.github.io/web-guide/了解了一下编码规范及学习资料。
现以客户端用法为例，具体步骤如下：
第一步： 访问http://less.bootcss.com/，从客户端用法块 点击less.js
会下载一个 less.js-master.zip 文件，解压后目录如下：
注意：打开dist目录，其中包含less.js、less.min.js两个文件（根据项目需求，可选择压缩或未压缩文件）。
第二步： 本地新建html静态项目，将less.js 或 less.min.js 拷贝至对应目录。
以LessDemo 为例，其中LessDemo为项目名、base.less为less样式文件、less.js为上面目录中拷贝的js执行文件、lessIndex.html是访问主页。
AG1： base.less源码
@charset "utf-8"; body{ margin: 0px; padding: 0px; background-color: #DFDFDF; } div{margin: 5px} .clear{clear: both;} //注释一，不会显示在编译后的Css文件中 /*注释二，会显示在编译后的Css文件中*/ /*变量遵循原则： *先定义后使用，格式为@name:value， *其中name符合变量明明规则，value要带上单位。 */ @width_200: 200px; @height_300: 100px; .div1{ width: @width_200; height: @height_300; background-color: #53616D; } /* 混合情况： 1、 直接引用某个类的所有属性； 2、 引用带参数无默认值的类属性； 3、 引用带参数有默认值的类属性。 */ //AG1: 直接引用 .box{width: 200px;height: 50px;float: left;} .border{border: solid 5px #3ECAAF;} .box1{ .border; //直接引用，使用类名即可 .box; } //AG2: 引用带参数无默认值的类属性 .border2(@border_width){ border: solid @border_width #3ECAAF; } .box2{ .box; .border2(10px); //无默认值，调用时 “定义名(参数值)” } //AG3: 引用带参数有默认值的类属性 .border3(@border_ 7px,@bstyle:solid){ border: @bstyle @border_width #3ECAAF; } .box3_1{ .box; .border3();//有默认值，可不传参数 } .box3_2{ .box; .border3(9px,dotted);//有默认值，传参可以覆盖默认值 } //Demo 圆角 .border_radius(@radius: 5px){ -wekit-border-radius: @radius; -max-border-radius: @radius; border-radius: @radius; } .radius_test1{ .box; .border(); .border_radius(); } .radius_test2{ .box; .border(); .border_radius(20px); } //应用背景: 三角 .sanjiao_demo{ width: 0px; height: 0px; overflow: hidden; border-width: 10px; border-color: transparent transparent red transparent; border-style: dashed dashed solid dashed;//解决IE6黑边问题 } /* 匹配模式下写三角： 仔细观察，top、bottom、@_这些是用于匹配执行哪个选择器的参数。 */ .sanjiao(top,@w:5px,@c:#f00){ border-width: @w; border-color: transparent transparent @c transparent; border-style: dashed dashed solid dashed; } .sanjiao(bottom,@w:5px,@c:#f00){ border-width: @w; border-color: @c transparent transparent transparent; border-style: dashed dashed solid dashed; } .sanjiao(@_,@w:5px,@c:#f00){ width: 0px; height: 0px; overflow: hidden; } .sanjiao_t1{ .sanjiao(top,20px); } .sanjiao_t2{ .sanjiao(bottom,15px,blue); } /* 匹配模式-定位 */ .pos(r){position: relative;} .pos(a){position: absolute;} .pos(f){position: fixed;} .pipei{ .box; background-color: green; .pos(r); } /* 嵌套 ul li a, 基本格式： .list{} .list li{} .list a{} .list a:hover{} .list span{} */ .list{ width: 800px; margin: 30px auto; padding: 0; list-style: none; li{ height: 30px; line-height: 30px; background-color: pink; margin-bottom:5px; } a{ display: block; float: left; //&符号代表上一层选择器 &:hover{ color: red; } } span{ display: block; float: right; } } /* @arguments 变量 */ .border_arg(@w: 30px,@c: red,@sty: solid){ border: @arguments; //等价于border:@w @c @sty; } /* 避免编译和important 在使用LESS中，可能用到一些非正规或者不需要计算的内容是，前面加~符号 */ //AG1: 避免编译 .test_no1{ width: ~'calc(300px - 30px)';//特殊方法，需要浏览器去计算 } .test_no2{ width: calc(300px - 30px); } //AG2: important，为所有引用的属性加上important .test_important{ .border!important; }
AG2：lessIndex.html源码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>LESS学习示例</title> <link rel="stylesheet/less" type="text/css" href="base.less" /> <!-- 定义LESS对象，为Less.js设置参数--> <script> less = { env: 'development', async: false, fileAsync: false, poll: 1000, functions: {}, dumpLineNumbers: "comments", relativeUrls: false, rootpath: '/' } </script> <script src="less.js" type="text/javascript"></script> <!-- 说明： 1、.less 文件应先于 less.js文件引入，这样才可保证less.css会执行为想要的样式； 2、如果引入多个.less文件，每个独立less文件中的变量是互不影响的； 3、less.js文件必须在</head>之前引入。 --> </head> <body> <div class="div1"></div> <div class="box1"></div> <div class="box2"></div> <div class="box3_1"></div> <div class="box3_2"></div> <div class="radius_test1"></div> <div class="radius_test2"></div> <div class="clear"></div> <div class="sanjiao_demo"></div> <div class="sanjiao_t1"></div> <div class="sanjiao_t2"></div> <hr> <div class="box4"></div> <ul class="list"> <li><a href="">这是一段文字</a><span>2014-11-26</span></li> <li><a href="">这是一段文字</a><span>2014-11-26</span></li> <li><a href="">这是一段文字</a><span>2014-11-26</span></li> <li><a href="">这是一段文字</a><span>2014-11-26</span></li> <li><a href="">这是一段文字</a><span>2014-11-26</span></li> <li><a href="">这是一段文字</a><span>2014-11-26</span></li> </ul> </body> </html>
备注：源代码可参考 http://blog.csdn.net/ys743276112/article/details/41510913
第三步： 配置IIS，访问该项目。
关于window7下IIS配置，请参考 http://www.jb51.net/article/29787.htm
@1、配置.less的MIME TYPE ： 点击MIME 类型，右侧点击添加：
文件扩展名： .less MIME类型： text/css
@2、配置默认文档： 点击默认文档，右侧点击添加：
lessIndex.html
@3、配置访问IP、端口（自定义，如8088）
配置完成后，访问http://localhost:8088即可。