Less 编译工具

Posted 2020-10-15

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文件（下同）：

1. @color: #4D926F;
2. .nav  { 
3.     color: @color;
4. } 

编译后CSS文件为：

1. .nav {
2.   color: #4d926f;
3. }
4. /*# sourceMappingURL=styles.css.map */

可以看出，在生成的CSS文件的末尾，会指示生成的 source map 的URL信息。本例中，source map 的URL为Less文件相同目录下的 styles.css.map文件。styles.css.map是一个独立的文件，内容如下：

1. {"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文件为：

1. /* line 3, styles.less */ 
2. .nav  { 
3.   color: #4d926f; 
4. } 

3）debug info（调试信息）：开启该功能后，编译生成的 CSS文件中就会包含调试信息。这样的话，通过Firefox或谷歌的调试工具，就可以定位到Less文件，而不是编译后的CSS文件。

编译后CSS代码为：

1. @media -sass-debug-info{filename{font-family:file\:\/\/D\:\/less\/styles\.less}line{font-family:\ 32}}
2. .nav {
3.   color: #4d926f;
4. }

如果编译生成的CSS文件中没有以 @media -sass-debug-info 开头的代码，说明没有输出调试信息。请使用Koala重新编译Less文件，并确定已经勾选了debug info选项。

4）strict math（严格运算模式）：开启“严格运算模式”后，数学运算必须放在括号中，否则可能会出现错误的结果。如以下Less代码：

1. p  { 
2.     line-height: 1+1;
3. } 

在关闭“严格运算模式”时，编译后CSS代码为：

1. p {
2.   line-height: 2;
3. }

在开启“严格运算模式”时，编译后CSS代码为：

1. p  { 
2.     line-height: 1+1;
3. } 

显然，这并不是我们想要的结果。因此，在开启“严格运算模式”后，如果想要得到正确的结果，所有的数学运算都必须放在括号中。如：

1. p  { 
2.     line-height: (1+1);
3. }

5）strict units（严格单位模式）：开启“严格单位模式”后，在编译时将强制验证单位的合法性。如，4px/2px 结果为 2，而不是 2px，而 4em/2px 将报错。如以下Less代码：

1. .nav  {
2.     font-size: 100em/5px;
3. }

由于上述代码没有使用严格单位，因此在“严格单位模式”下，就会出现编译错误。错误信息如下：

1. SyntaxError: Multiple units in dimension. Correct the units or use the unit function. Bad unit: em/px in D:\less\styles.less:2:4
2. 1 .nav  { 
3. 2     font-size: 100em/5px;
4. 3 }

6）autoprefix（自动前缀模式）：开启“自动前缀模式”后，在编译时会为某些非常新的CSS属性添加浏览器私有前缀。如，以下Less代码：

1. h2 {
2.   transform: rotate(45deg);
3. }

在开启“自动前缀模式”时，编译后CSS代码为：

1. h2 {
2.   -webkit-transform: rotate(45deg);
3.       -ms-transform: rotate(45deg);
4.           transform: rotate(45deg);
5. }