1.4.3 Koala界面介绍

把文件夹拖入窗口后，Koala会自动创建相应的工程。Koala的界面被分为四个区域，分别是按钮区、工程区、工程文件列表区、设置区。如图 1‑3所示：

按钮区

第一个区域为按钮区，包含三个按钮。第一个按钮用于添加工程，第二个按钮用于打开编译文件的错误提示信息，第三个按钮用于Koala的全局设置，可以设置界面语言，Less、Sass等的默认选项和输出方式及高级设置等。当然，这里也包括Koala的当前版本号及作者信息等。

工程区

第二个区域为工程区，该区域会显示所有的工程，一行是一个工程。可以直接把文件夹拖入到该区域，每拖入一个文件夹就会添加一个工程。

文件列表区

第三个区域为工程的文件列表区，显示被选中工程中的文件列表，每行是一个文件。每个文件的前面，有一个矩形图标用来标识文件的类型，图标后面紧跟文件名及编译输出的CSS文件的路径。

如果该文件需要自动编译，图标和文本会以深色正常显示，否则会反灰显示（如，CSS就被反灰显示）。

可以直接把文件拖入到该区域，拖入的文件会被添加到被选中的工程中。添加文件后，需要点击上面的 refresh按钮来刷新文件列表。选中文件后，键盘点delete键，可以将该文件从工程中移除。也可以在某个文件上右击鼠标，根据弹出的功能菜单执行相应的操作。如图 1‑4所示：

如果工程中的文件类型较多，也可以通过下面的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:4
1 .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);
}