Less 编译工具

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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文件(下同):

  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. { 
  2.     line-height: 1+1;
  3. } 

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

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

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

  1. { 
  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. }
 
 

以上是关于Less 编译工具的主要内容,如果未能解决你的问题,请参考以下文章

less及编译工具介绍

less及编译工具介绍

Less/Sass编译工具

Less/Sass编译工具,koala使用指南

8.9

less的学习