标签：
less官网地址：http://www.1024i.com/demo/less/
使用客户端less，我们可以看到这么几个要点：
1.引用less.js文件，less文件解析
2.less.js是发送ajax请求的，需要走www协议，我们要是服务器环境下测试我们的html页面，纯静态打开不可以
3.就是less文件的引入，格式如下 <link rel="stylesheet/less" href="example.less" />
既然注意点已经总结完毕，我们针对注意搭建我们客户端less的环境：
1.我们服务端环境就是基于php的，阿帕奇+php+mysql集成安装通过appsever实现：
http://my.oschina.net/u/2352644/blog/490351 按步骤操作，直到demo浏览成功。
2.同上一次一样，我们不是在nodejs下创建了demoless目录和相关less，html文件，直接全部放入appsever的www目录下。
3.我们直接在浏览器地址栏打入如下地址：
http://localhost:8080/lessdemo/demo.html
4.我们的文件目录包含：
demo.html
less.css
less.less
html代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>less</title> <link rel="stylesheet" type="text/css" href="less.css"/> </head> <body> <div class="demo"> <div class="demo-header"> <span class="left">标题</span> <a href="#2" class="right">更多</a> </div> <div class="demo-con"> <a href="#2">1111111111</a> <a href="#2">22222222222</a> <a href="#2">33333333333</a> <a href="#2">4444444444</a> <a href="#2">555555555</a> </div> </div> </body> </html>
当前引入还是css文件
css文件：
.left {
float: left;
}
.right {
float: right;
}
.he50 {
height: 50px;
line-height: 50px;
}
.demo {
width: 500px;
height: 500px;
}
.demo .demo-header {
height: 50px;
line-height: 50px;
}
.demo .demo-header span {
color: #000;
}
.demo .demo-header a {
color: #ddd;
float: right;
margin: 0 10px;
}
.demo .demo-header a:hover {
color: #ffa;
}
.demo .demo-con a {
display: block;
height: 50px;
line-height: 50px;
color: #ddd;
}
.demo .demo-con a:hover {
color: #ffa;
}
"Administrator" Sid: S-1-5-21-779701839-1365383676-4129786368-500
通过下面编译而成
less文件：
.left{float:left;}
.right{float:right;}
@colorlink:#ddd;
@colorhover:#ffa;
.he50{
height:50px;
line-height:50px;
}
.demo{
width:500px;
height:500px;
.demo-header{
.he50;
span{
color:#000;
}
a{
color:@colorlink;
float:right;
margin:0 10px;
&:hover{color:@colorhover;}
}
}
.demo-con{
a{
display:block;
.he50;
color:@colorlink;
&:hover{color:@colorhover;}
}
}
}
5.我们按照注意点，将html页面引入的less.css文件改为less.less，做如下修改，注意引入less外部文件要修改rel属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>less</title> <link rel="stylesheet/less" href="less.less" /> </head> <body> <div class="demo"> <div class="demo-header"> <span class="left">标题</span> <a href="#2" class="right">更多</a> </div> <div class="demo-con"> <a href="#2">1111111111</a> <a href="#2">22222222222</a> <a href="#2">33333333333</a> <a href="#2">4444444444</a> <a href="#2">555555555</a> </div> </div> </body> </html>
刷新地址，我们预览页面，发现样式都没有了，这是正常的，我们虽然有less文件，并且被引用，不过是不被是别的，我们缺少最重要的less.js解析文件，我们继续处理
6.less.js也就是客户端less解析文件下载和引用
下载地址：https://github.com/less/less.js
解压后找到dist下的less.js和less.min.js复制到我们的lessdemo目录下
我们html页面引入less.js或者less.min.js未压缩和压缩版。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>less</title> <link rel="stylesheet/less" href="less.less" /> <script type="text/javascript" src="less.js"></script> </head> <body> <div class="demo"> <div class="demo-header"> <span class="left">标题</span> <a href="#2" class="right">更多</a> </div> <div class="demo-con"> <a href="#2">1111111111</a> <a href="#2">22222222222</a> <a href="#2">33333333333</a> <a href="#2">4444444444</a> <a href="#2">555555555</a> </div> </div> </body> </html>
再次浏览页面，我们发现less.less被转为css并且样式可用，我们可以审查元素查看那些被客户端解析好的css。
7.发现的问题，我们使用客户端解析办法，是要先下载less.less文件和less.js，然后js文件去解析less转为css，这样的操作无疑会使我们页面样式显示变慢。
标签：
原文地址：http://my.oschina.net/u/2352644/blog/518832
