浏览器端使用less
官网地址
下载
点击***Download Source Code***（下载源码）后得到zip文件，解压后放入项目中。
使用
编辑一个简单的less文件。
test.less
@base: #f00;
.ccc{
color: @base
}
@base是设置了一个变量，将类ccc的颜色设为红色。
更多用法见：http://lesscss.cn/functions/
编辑html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet/less" type="text/css" href="test.less" />
<script type="text/javascript">
less = {
env: "development",
async: false,
fileAsync: false,
poll: 1000,
functions: {},
dumpLineNumbers: "comments",
relativeUrls: false,
rootpath: ":/a.com/"
};
</script>
<script src="/HtmlTest/js/less.js-2.5.3/dist/less.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="ccc">1111111111</div>
</body>
</html>
效果
另一种声明式的写法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link data-dump-line-numbers="all" data-global-vars='{ myvar: "#ddffee", mystr: "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="test.less">
<script src="/HtmlTest/js/less.js-2.5.3/dist/less.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="ccc">1111111111</div>
</body>
</html>
写法上要简介一些，只是官方给出的例子实在有些少
配置项文档：http://lesscss.cn/usage/#using-less-in-the-browser-setting-options
顺带一提，官方给出的例子时这个
<script src="less.js" data-poll="1000" data-relative-urls="false"></script>
<link data-dump-line-numbers="all" data-global-vars='{ myvar: "#ddffee", mystr: "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">
先加载js，后加载less。反正我是不知道怎么让它运行起来。
显示编译后的css代码
使用谷歌浏览器运行后直接F12，可以查看编译后的css
dumpLineNumbers属性可以改变输出的内容，暂时没发现有什么实质上的区别。
dumpLineNumbers
Type: String Options: ‘’| ‘comments’|‘mediaquery’|‘all’ Default: ‘’
When set, this adds source line information to the output css file. This helps you debug where a particular rule came from.
The comments option is used for outputting user-understandable content, whilst mediaquery is for use with a firefox extension which parses the css and extracts the information.
In the future we hope this option to be superseded by sourcemaps.
命令行生成css文件
准备好npm环境（没有的可以直接下载nodejs），安装lessnpm install less -g
通过lessc命令生成css文件
lessc 文件.less > 文件.css
在线编译地址
http://lesscss.cn/usage/#online-less-compilers
更多第三方编译工具
http://lesscss.cn/usage/#third-party-compilers
上一篇： soap扩展编译,加载及动态加载
推荐阅读