Less简明教程
1.4.3 Koala界面介绍
阅读(

Less 基础

认识 Less

Less 原理

Less 用法

Less 编译工具

如何使用Koala

选择Koala的理由

Koala界面介绍

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

Koala界面分区
图1-3 Koala界面分区

按钮区

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

工程区

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

文件列表区

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

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

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

Koala文件右键菜单
图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: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);
}

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验