欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

LESS/Sass编译工具Koala的使用介绍

程序员文章站 2022-06-20 08:30:46
越来越多的同学开始使用 less 等预处理器的方式来编写 css 跟 javascript ,比较流行的有 less 、 sass 、 coffeescript 。 less 等代...

越来越多的同学开始使用 less 等预处理器的方式来编写 cssjavascript ,比较流行的有 less 、 sass 、 coffeescript 。 less 等代码无法直接在中执行,最终还是需要编译成 css 或 js 。它们语法很棒,但是它们的编译方式却不够灵活。官方基本上都是只提供命令行的方式进行文件编译, less 还可以在页面中嵌入一个 less.js 进行在线编译,但这种方法实在是不靠谱。所以大家都喜欢使用图形界面工具来进行编译工作,高效快捷。在 koala 开发之前已经有一些工具了,比如 winless 、 simpless 等,功能都比较单一,且只支持 less 。 还有一些同学折腾编辑器 sublime text 等,但目前还没有一个很完美的方案。还好,现在有了koala。

koala 是什么?

koala 是一款桌面程序,支持 less 、 sass 、 coffeescript 即时编译,帮助 web 开发者更高效地使用 less 、 sass 、 coffeescript 开发。

koala 特性:

多语言支持 :支持 less 、 sass 、 coffeescript 和 compass framework 。

实时编译: 监听文件,当文件改变时自动执行编译,这一切都在后台运行,无需人工操作。

编译选项: 支持自定义编译选项。

代码压缩: less

安装koala

在koala官网根据你的平台下载对应的版本。linux系统要求已安装好ruby运行环境。

添加项目

拖拽文件夹到koala界面,即可添加项目。如项目目录下有新增文件,点击文件列表上方的刷新按钮,将自动添加新文件。

修改文件输出目录

选择某个文件后,点击路径旁边的"编辑"图标,或单击右键出现操作菜单。可按下ctrl键同时选中多个文件,然后右键操作批量设置。

多文件批量设置

可像文件管理器一样,同时选择多个文件,ctrl, shift, ctrl+a, 鼠标滑选. 选中多个文件后单击右键出现操作菜单,目前功能有设置输出目录、切换自动编译、执行编译、移除文件。

使用指定编译器

某些时候你希望使用指定的某个版本的编译器,如你希望使用sass pre version, 此时可以打开koala设置面板,在对应的编译器设置栏,勾选“使用系统设置”;关于“使用指定的编译器”,如果在全局环境中(终端)可以直接执行该编译器命令,如sass -h,则无需填写,否则则填写具体的执行路径