掌握LESS，必须先掌握LESS的编译。因为LESS是CSS预处理语言的一种，是一种动态语言。LESS可以运行在各种语言和环境中，包括浏览器端、服务器端等。就因为是一种CSS预处理语言，所以需要编译。下面为大家介绍一下编译的方法。
浏览器端编译
LESS可以在浏览器端不用编译直接使用。在浏览器端使用LESS的时候，需要引入一个JS文件，这个JS文件能够把LESS文件在浏览器端编译成CSS文件，然后在呈现到页面上。
使用方法
1、下载less-1.4.2.min.js文件;
下载地址：http://www.leemagnum.com/js/less-1.4.2.min.js
2、页面引入后缀名为“.less”的文件
<link rel="stylesheet/less" type="text/css" href="styles.less" />
3、页面引入下载过的less-1.4.2.min.js的文件
<script src="less.js" type="text/javascript"></script>
特别注意
A、LESS文件要在LESS脚本之前引用
B、必须在http(s)协议下使用
C、.less文件不可以跨域使用(可以通过在服务端设置CORS来解决)
高级设置
引入less.js之前通过创建一个全局less对象的方式来指定参数
<script type="text/javascript">
less = {
env: "development", // 或者"production"
async: false, // 异步加载导入的文件
fileAsync: false, // 使用文件协议访问页面时异步加载导入的文件
poll: 1000, // 在监视模式下，每两次请求之间的时间间隔（ms）
functions: {}, // user functions, keyed by name
dumpLineNumbers: "comments", // 或者"mediaQuery"，或者"all"
relativeUrls: false,// 是否调整相对路径
// 如果为false，则url已经是相对入口less文件的
// entry less file
rootpath: ":/a.com/"// 添加到每个url开始处的路径
};
</script>
<script src="less.js" type="text/javascript"></script>
监视模式
监视模式是一种在客户端(浏览器)使用时的特性，它会在样式文件有更新时自动刷新页面。
在URL中加入#!watch并刷新页面即可开启监视模式。你也可以通过在console中运行less.watch()来开启监视模式。
修改变量
使用modifyVars可以在运行时修改LESS变量。当用新的变量值调用了这个函数时，LESS文件将会被重新编译，但不会被重新加载。一个基本的用法示例：
less.modifyVars({
'@buttonFace': 'red',
'@buttonText': '#fff'
});
调试LESS
我们在生成的CSS中带上一些额外的信息，以便一些调试工具可以定位到LESS文件中的行数。可以通过dumpLineNumbers选项或者在url中添加!dumpLineNumbers:mediaQuery来开启这个功能。你可以选择“注释”方式，使用FireLESS来调，或者选择“mediaQuery”方式，使用FireBug/Chrome开发者工具(被识别为SCSS media query调试格式)来调试。
使用koala本地编译
Koala 是一款由国人开发的开源预处理语言图形编译工具，目前已支持 Less、Sass、Compass 与 CoffeeScript。目前支持以下系统：Windows，Mac, 10.7+，Linux: 32bit / 64bit，Ubuntu: 32bit / 64bit;下载可以去百度搜索“koala下载”进行下载。下面就针对编译LESS进行介绍。
使用方法
1、安装完成后打开 Koala，把文件夹拖入界面或者是在左侧加号处选择文件夹，此时在界面左边有文件夹路径产生。
2、同时有 less 文件将显示在界面中间，右键文件选择输出 CSS 文件的路径。
3、左键点击 less 文件在右边则有功能选项栏弹出，下面将介绍功能。
自动编译(实时编译)
当开启自动编译时，使用编辑器按下 Ctrl+S 保存时，CSS 文档会自动更新。如果没有打开这个功能，那么需要使用者在自行点击"执行编译"才更新 CSS 文档。
编译选项
行注释(line comments)：这个功能会在 css 文件里对应的 less 编译出来的 css 代码上方提供一个注释。注释的内容分别说明来自 less 的第几行开始，同时标明是来自那个 less 文件。小例子如下
LESS代码
@color: #4D926F;
.meng {
color: @color;
}
编译后CSS代码
/* line 3, a.less */
.meng {
color: #4d926f;
}
调试信息(debug info)：这个调试功能是在保存时自动检测有无错误，注意实时编译关闭时不会开启，需要在你执行时才弹出错误。所以，建议开启实时编译。目前调试功能仅能检测出一些影响编译的错误：例如没有带{}、没带分号。这些错误，而有没有使用选择器或者样式输入错误则不会提示。小例子如下
LESS代码
@color: #4D926F;
.meng {
color: @color;
}
编译后CSS代码
@media -sass-debug-info{filename{font-family:file://E:/李梦龙-文档/LESS/LESS详解之koala编译LESS/less/b.less}line{font-family: 00033}}
.meng {
color: #4d926f;
}
严格的数学(strict Math)和严格的单位(strict Units)是Koala 2。0新加的两个，目前还没有研究有啥区别编译出来都是没有注释的。小例子如下
LESS代码
@width : 2.233323232em;
.meng {
@width;
}
编译后CSS代码
.meng {
2.233323232em;
}
输出方式(代码压缩)
正常(normal)：顾名思义，就是不压缩。
LESS代码
@width : 2.233323232em;
.meng {
@width;
.leng {
@width;
}
}
编译后CSS代码
.meng {
2.233323232em;
}
.meng .leng {
2.233323232em;
}
压缩(compress)：顾名思义，就是压缩。
LESS代码
@width : 2.233323232em;
.meng {
@width;
.leng {
@width;
}
}
编译后CSS代码
.meng{2.233323232em}.meng .leng{2.233323232em}
YUI压缩(YUIcompress)：使用 YUI 的压缩打包工具进行压缩。
LESS代码
@width : 2.233323232em;
.meng {
@width;
.leng {
@width;
}
}
编译后CSS代码
.meng{2.233323232em}.meng .leng{2.233323232em}
LESS详解之编译LESS就为大家介绍到这里了。了解了LESS是怎么编译的，才能更好的了解LESS的语法知识。有了LESS编译法宝，为我们了解LESS做好了坚实的准备。