Less 编译工具
Less 编译工具
虽然你可以选择在浏览器端使用Less，直接在页面中嵌入一个 Less.js 文件，你也可以选择在服务器端使用Less，使用命令行将Less文件编译成最终的CSS文件。
然而，这两种方式都不够灵活，人们更喜欢使用图形界面工具进行编译。常见的工具有 winLess、simpLess、Koala 等，最值得推荐的编译工具，非 Koala 莫属。
Koala是由国人开放的一款开源的前端预处理器语言图形编译工具，可以跨平台运行，完美兼容windows、linux、mac，支持Less、Sass、Compass、CoffeeScript，帮助Web开发人员更高效地进行开发。
有了 Koala，就再也不用手动输入命令进行编译，因为 Koala 会监听文件内容的改变，并自动将 .less 文件编译成 .css 文件，省时省力。你还像以前一样，在页面中直接使用 .css 文件，工作方式没有发生任何改变，也不会改变你的使用习惯。
选择Koala的理由
Koala具有以下优点，这正是推荐它的根本原因：
- 多语言支持：支持Less、Sass、CoffeeScript 和 Compass Framework。
- 实时编译：监听文件，当文件改变时自动执行编译，这一切都在后台运行，无需人工操作。
- 编译选项：既可统一设置文件的编译选项，也可单独设置某个文件的编译选项。
- 强大的文件右键功能：在文件上右键，即可操作打开文件、打开文件目录、打开输出文件目录、设置输出文件目录、编译、删除六大常用功能。
- 错误提示：如果编译时遇到语法错误，Koala会自动弹出错误信息，方便开发者定位代码错误位置。
- 跨平台：windows、linux、mac都能完美运行。
- 免费且负责：Koala完全免费，而且作者很负责，有什么问题作者都会及时给予答复，意见什么的可以直接提交给作者，一般在下一个版本就能得到解决。
如何使用Koala
开发者可以在百度搜索“Koala下载”，根据系统平台下载对应的版本。比如，我们下载是V2.0.4版本，它是绿色版本，可以直接使用。
Koala的界面简单、清晰，也很漂亮。如图 1‑2 所示：
图1-2 Koala界面
有了 Koala，一切将变得非常简单：
第一步：把目录拖进窗口，或点击左上角加号图标，选择需要编译的Less文件目录。
第二步：在编辑器中编写Less代码。
第三步：编写完成后，Ctrl+S保存文件，Koala会在后台自动编译出CSS文件。
Koala界面介绍
把文件夹拖入窗口后，Koala会自动创建相应的工程。Koala的界面被分为四个区域，分别是按钮区、工程区、工程文件列表区、设置区。如图 1‑3所示：
图1-3 Koala界面分区
按钮区
第一个区域为按钮区，包含三个按钮。第一个按钮用于添加工程，第二个按钮用于打开编译文件的错误提示信息，第三个按钮用于Koala的全局设置，可以设置界面语言，Less、Sass等的默认选项和输出方式及高级设置等。当然，这里也包括Koala的当前版本号及作者信息等。
工程区
第二个区域为工程区，该区域会显示所有的工程，一行是一个工程。可以直接把文件夹拖入到该区域，每拖入一个文件夹就会添加一个工程。
文件列表区
第三个区域为工程的文件列表区，显示被选中工程中的文件列表，每行是一个文件。每个文件的前面，有一个矩形图标用来标识文件的类型，图标后面紧跟文件名及编译输出的CSS文件的路径。
如果该文件需要自动编译，图标和文本会以深色正常显示，否则会反灰显示（如，CSS就被反灰显示）。
可以直接把文件拖入到该区域，拖入的文件会被添加到被选中的工程中。添加文件后，需要点击上面的 refresh按钮来刷新文件列表。选中文件后，键盘点delete键，可以将该文件从工程中移除。也可以在某个文件上右击鼠标，根据弹出的功能菜单执行相应的操作。如图 1‑4所示：
图1-4 Koala文件右键菜单
如果工程中的文件类型较多，也可以通过下面的all/Styles/Scripts/Tmpl/JS/CSS 来过滤需要编译的文件。
编译选项设置区
第四区域为文件的编译选项设置区，该区域默认不会显示出来，只有当鼠标单击文件列表区的某个文件时，才会显示出来。
这个区域可以针对某个文件设置自动编译、编译选项、输出方式，还可以点击“执行编译”来手动编译。
1、自动编译
当开启自动编译时，在编辑器中按下 Ctrl+S 保存文件时，Koala会自动编译，并自动更新相应的CSS 文件。如果没有打开自动编译功能，就需要手动点击“执行编译”，才会编译并更新 CSS 文件。
2、编译选项
1）source map（源文件映射）：开启该功能后，在编译Less的同时，会生成相应的source map 文件。这样，就可以在Firefox或谷歌浏览器中，通过sourcemap来直接调试Less源文件。如，以下Less文件（下同）：
@color: #4D926F;.nav {color: @color;}
编译后CSS文件为：
.nav {color: #4d926f;}/*# sourceMappingURL=styles.css.map */
可以看出，在生成的CSS文件的末尾，会指示生成的 source map 的URL信息。本例中，source map 的URL为Less文件相同目录下的 styles.css.map文件。styles.css.map是一个独立的文件，内容如下：
{"version":3,"file":"styles.css","sources":["styles.less"],"names":[],"mappings":"AACA;EACI,cAAA;;AAGJ;EACE,cAAA","sourceRoot":"..\\less"}
简单说，.map文件就是一个关系映射文件，里面存储着编译前和编译后代码的文件、行号、列号和变量名的映射关系，以便开发人员根据这些位置信息来调试Less源文件。
2）line comments（行注释）：开启该功能后，会在编译出来的CSS文件中对应的CSS 代码上方，提供一个注释，用来说明CSS 代码来自哪个Less文件，以及从哪一行开始。
编译后CSS文件为：
/* line 3, styles.less */.nav {color: #4d926f;}
3）debug info（调试信息）：开启该功能后，编译生成的 CSS文件中就会包含调试信息。这样的话，通过Firefox或谷歌的调试工具，就可以定位到Less文件，而不是编译后的CSS文件。
编译后CSS代码为：
@media -sass-debug-info{filename{font-family:file\:\/\/D\:\/less\/styles\.less}line{font-family:\ 32}}.nav {color: #4d926f;}
如果编译生成的CSS文件中没有以 @media -sass-debug-info 开头的代码，说明没有输出调试信息。请使用Koala重新编译Less文件，并确定已经勾选了debug info选项。
4）strict math（严格运算模式）：开启“严格运算模式”后，数学运算必须放在括号中，否则可能会出现错误的结果。如以下Less代码：
p {line-height: 1+1;}
在关闭“严格运算模式”时，编译后CSS代码为：
p {line-height: 2;}
在开启“严格运算模式”时，编译后CSS代码为：
p {line-height: 1+1;}
显然，这并不是我们想要的结果。因此，在开启“严格运算模式”后，如果想要得到正确的结果，所有的数学运算都必须放在括号中。如：
p {line-height: (1+1);}
5）strict units（严格单位模式）：开启“严格单位模式”后，在编译时将强制验证单位的合法性。如，4px/2px 结果为 2，而不是 2px，而 4em/2px 将报错。如以下Less代码：
.nav {font-size: 100em/5px;}
由于上述代码没有使用严格单位，因此在“严格单位模式”下，就会出现编译错误。错误信息如下：
SyntaxError: Multiple units in dimension. Correct the units or use the unit function. Bad unit: em/px in D:\less\styles.less:2:41 .nav {2 font-size: 100em/5px;3 }
6）autoprefix（自动前缀模式）：开启“自动前缀模式”后，在编译时会为某些非常新的CSS属性添加浏览器私有前缀。如，以下Less代码：
h2 {transform: rotate(45deg);}
在开启“自动前缀模式”时，编译后CSS代码为：
h2 {-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
