SASS界面编译工具——Koala的使用

转载 2015年07月08日 14:01:25

SASS界面编译工具——Koala的使用

SASS界面编译工具——Codekit的使用》一文中图解了"CodeKit"图形工具编译SASS项目。由于CodeKit是一款付费工具,而且只能在Mac中使用,因此国内众多SASS爱好者,或者初学者也就无法体验CodeKit工具编译SASS项目。幸运的是,有一款国产图形工具KoalaCodeKit功能极其类似,支持多个平台,而且是开源的。

Koala

SASS界面编译工具——Codekit的使用

Koala官网下载Koala

Koala是一个前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。不过在这篇文章中,我们仅介绍如何用Koala来编译SASS项目。

Koala特性

在介绍如何使用Koala之前,我们先简单的了解一下Koala具有哪些功能特性:

  •  支持多语言:支持LESSSASSCoffeeScriptCompass
  •  实时编译:监听文件,当文件改变时自动执行编译,这一切都在后台运行,无需人工操作;
  •  编译选项:可以设置各个语言的编译选项;
  •  代码压缩:Less和Sass支持编译后自动压缩代码;
  •  错误提示:在编译时如果遇到语法的错误,提供错误信息log,方便开发者定位代码错误位置;
  •  跨平台运行:可以在WindowLinuxMac OS X多个平台下完美运行。

Koala下载与安装

如果你决定使用Koala来编译您的SASS项目,那么你就得先安装一个Koala。要是你是第一次使用Koala,你可以到他的官网下载对应的版本,因为Koala提供多个环境的安装文件:

<iframe id="cproIframe_u1490106_1" width="468" height="60" src="http://pos.baidu.com/acom?adn=0&amp;at=128&amp;aurl=&amp;cad=1&amp;ccd=24&amp;cec=UTF-8&amp;cfv=17&amp;ch=0&amp;col=zh-CN&amp;conOP=0&amp;cpa=1&amp;dai=1&amp;dis=0&amp;layout_filter=rank%2Cimage&amp;ltr=&amp;ltu=http%3A%2F%2Fwww.w3cplus.com%2Fpreprocessor%2Fsass-gui-tool-koala.html&amp;lunum=6&amp;n=01006029_cpr&amp;pcs=1440x805&amp;pis=10000x10000&amp;ps=1749x70&amp;psr=1440x900&amp;pss=1440x1860&amp;qn=17d1b8578af07128&amp;rad=&amp;rsi0=468&amp;rsi1=60&amp;rsi5=4&amp;rss0=&amp;rss1=&amp;rss2=&amp;rss3=&amp;rss4=&amp;rss5=&amp;rss6=&amp;rss7=&amp;scale=&amp;skin=tabcloud_skin_6&amp;stid=5&amp;td_id=1490106&amp;tn=baiduCustSTagLinkUnit&amp;tpr=1436333433990&amp;ts=1&amp;version=2.0&amp;xuanting=0&amp;dtm=BAIDU_DUP2_SETJSONADSLOT&amp;dc=2&amp;di=u1490106&amp;ti=SASS%E7%95%8C%E9%9D%A2%E7%BC%96%E8%AF%91%E5%B7%A5%E5%85%B7%E2%80%94%E2%80%94Koala%E7%9A%84%E4%BD%BF%E7%94%A8%20%7C%20css3%E6%95%99%E7%A8%8B-css3%E5%AE%9E%E4%BE%8B-css3%E5%8A%A8%E7%94%BB%20%7C%20W3CPlus&amp;tt=1436333433977.14.66.69" align="center,center" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="box-sizing: inherit;"></iframe>

下载Koala

下载您所需版本后直接点击安装文件,step by step就Ok了,此处就不做过多阐述了。

创建项目

要让Koala来编译SASS项目,首要的条件就是要有SASS项目,不然巧妇难为无米之炊,什么事也办不了。因为在自己的项目目录下先创建一个SASS项目,在这里我创建了一个名叫koalaSass的项目。(我一般喜欢把项目都放置在一个叫Sites目录中)。同时创建一个sass的目录,把项目中的所以.scss文件放置在这个目录中:

SASS界面编译工具——Codekit的使用

Koala使用

Koala的使用其实非常的简单,第一步你启动您安装在本地的Koala,你会看到一个很清爽的界面:

SASS界面编译工具——Codekit的使用

整个界面包含的内容非常的简单,左上角有三个按钮:“添加项目”、“Error Log”和“配置”,在整个右边主内区域,默认是加载“项目”的界面。如下图所示。

添加项目

Koala添加SASS项目非常的简单,你可以点击面板左上角的+(添加)按钮,找到你的SASS项目,然后确认放进来:

SASS界面编译工具——Codekit的使用

此时你在Koala面板中,你可以看到已添加进来的Sass项目:

SASS界面编译工具——Codekit的使用

除了这种方法之外,还有一种更简单的方法添加sass项目到Koala面板中,那就是直接将你的项目拖到面板右边区域中:

SASS界面编译工具——Codekit的使用

一旦你的SASS项目拖到Koala主内容面板区域,松开你的鼠标左键,那么你拖放的SASS项目就放置在Koala中,换句话说,也就是添加项目成功:

SASS界面编译工具——Codekit的使用

删除项目

有时候你可能想清理一下Koala面板中的SASS项目,因为测试的太多了,想整一个实实在在的项目,又不想其他没用的项目干扰你的视线,那么你就可以删除他们。在Koala中删除项目也非常的简单。

你只要在Koala左边栏项目展示区域,用鼠标“右键”点击你要删除的项目,选择“删除”菜单项,你就轻松的删除了你想要删除的Sass项目:

SASS界面编译工具——Codekit的使用

编译SASS项目

在前面几步,我们把koalaSass项目成功的添加到了Koala面板中,由于我们的style.scss文件里面还没有任何SASS代码,我们来试编辑一下,在style.scss文件中先加入下面的代码:

//This is sass file

$color: #888;
$bgColor: #f36;

header {
    color: $color;
    background-color: $bgColor;
}

保存你修改的style.scss文件。

见证神奇的时候到了,当你保存style.scss文件完成的那一刻,Koala自动的帮你完成了.scss文件转译成.css文件,并且将转译出来的.css文件都放置在css目录下:

SASS界面编译工具——Codekit的使用

简单看看编译出来的CSS是不是正确的:

header {
  color: #888888;
  background-color: #ff3366; }

很神奇吧。

纠错功能

Koala和CodeKit一样,具有Debug功能,当你的SASS文件存在问题的时候,他会给您报错,告诉您的SASS在哪个位置出错了。这对于我们来说是非常有用的,能快速的帮助我们找到出错代码的位置,快速让你纠正代码。

同样我们来看一个简单的例子,我们把定义变最的$符号换成#符号,然后保存你修改的style.scss文件:

//This is sass file

#color: #888;
$bgColor: #f36;

header {
    color: #color;
    background-color: $bgColor;
}

你个时候在你的电脑屏幕右上角会出现错误的提示信息(在Win下面会显示在屏幕右下角处):

SASS界面编译工具——Codekit的使用

如果你一不小心,让这个报错信息消失了,你可以到编辑器中再次保存.scss文件,那么这个报错信息又会自动出现。要是你觉得麻烦,你可以直接到Koala面板中查看错误信息的记录:

SASS界面编译工具——Codekit的使用

Koala功能设置

上面仅演示了Koala工具的一些基本操作,其实他还提供了其他一些强大功能,这些具体的功能,你可以在Koala的功能设置面板中进行设置。

SASS界面编译工具——Codekit的使用

如何设置,就不用在做过多的阐述,因为不同的语言对应不同的参数设置,对于SASS语言来说,就那么几条,一眼看支就没了,具体起什么作用,大家可以查一下单词,实在不想查的话,直接点点试试,一试就明了。(^_^)

Koala的其他功能

Koala还提供了一些常用的鼠标右键功能,而且您还可以多项或者全选项目中的文件,如下图所示:

SASS界面编译工具——Codekit的使用

Koala与Compass的结合

你可能还记得CodeKit可以和Compass框架完美结合,常使用Compass的同学,一定离不开他,离开了你总会觉得少了什么,你会失落,你会难以入睡。不过让你想不到的时,使用Koala的话,他不会让你失落也不会让你失眠,因为他在为你考虑。

在Koala中同样植入了Compass框架,不过这个功能还在Koala团队还在开发中,不过现在也可以使用的,只是使用方法较之CodeKit略有逊色。接下来我们来看看如何在Koala中使用Compass。

第一步,也是非常重要的一步,在你的项目根目之下要创建一个compass框架所需要的config.rb文件,并在文件中配置相关的参数:

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
fonts_dir = "fonts"

output_style = :nested

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
color_output = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

config.rb文件配置完成之后,我们就可以在Koala中使用Compass了。在Koala面板的文件区域,用鼠标右键点击您的Sass项目,按下图所示方法选择对应的菜单项:

SASS界面编译工具——Codekit的使用

接着Koala会出现一个提示框,向您询问config.rb文件已经存在,您是否需要编辑他:

SASS界面编译工具——Codekit的使用

如果您的config.rb文件已经编辑好了,你就可以点击 “Cancel”按钮,继续下面的工作。

这个时候当你编辑了项目中.scss文件之后,Koala就会自动编译成.css文件,然后生对应的目录,这个是跟config.rb中配置有关系了。

当然还有一种比较好的方法,那就是你需要创建Compass SASS项目的时候,就在根目中创建好config.rb文件,并且配置好,然后按照前面添加项目的方式,直接将项目添加到Koala面板中就Ok了。

基中“project setting for compass”这个功能很强大,你可以根据自己的需求配置koala-config.json文件。如果你只是普通需求,就不用这么整了,Koala自身就能帮助完成。

目前虽然Koala和Compass这样的框架操作相对来说体验略差一点,但我相信后面的版本,这方面肯定会得到改善。

总结

本文主要通过创建一个SASS项目为实例,带领大家如何使用Koala这样的图形界面编译工具来将你的SASS项目,将SASS文件编译成CSS文件。

那么有关于如何使用Koala编译SASS的操作,就简单的介绍到这里。有关于Koala更详细的介绍可以点击这里

最后非常感谢好友Ethan Lai的精心指导,也同时非常感谢Koala团队中的Max DengLeott Liu。如果大家对Koala有何想法或者改善意见,可以直接在下面的评论中留言,Koala团队成员会及时向大家解决。

如需转载,烦请注明出处:http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html

Sass详解之编译工具koala

如需调试功能,请在编译输出的时候输出debug信息,那样解析的css文件中就会包含debug信息,然后通过firebug或谷歌的调试工具就可以定位到我们编辑的scss文件,而不是解析后的css文件。...

less学习之编译方法(koala使用说明)

今天学习了less,先总结一下less的编译方式,我用到的编译工具是koala,可以去http://koala-app.com/index-zh.html进行下载...

移动端屏幕适配 fis3+rem方案

移动端多屏适配rem方案   背景 1. 开发移动端H5页面 2. 面对不同分辨率、dpr的手机 3. 面对不同屏幕尺寸的手机   一、概念 1、物理像素(physical pixel) 一个物理像素...

SASS界面编译工具——Koala的使用

Koala Koala官网下载Koala Koala是一个前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进...

打造前端 Deepin Linux 工作环境——安装 koala css 预编译工具(安装deb包的方法

打造前端 Deepin Linux 工作环境——安装 koala css 预编译工具(安装deb包的方法)koala 是国人开发的一个 css 预编译工具,可以编译 sass\less 之类的文件,非...
  • FungLeo
  • FungLeo
  • 2017年11月04日 18:06
  • 515

Sass:初识Sass与Koala工具的使用

一、下载 Koala(找到合适的系统版本)并安装     二、先新建一个css文件夹,并在里面新建一个文本文档(.txt),将其命名为demo.scss   ...

lesscss中文文档_编译工具koala

  • 2014年03月12日 23:51
  • 24.42MB
  • 下载

Less/Sass编译工具

Less编译环境可以使用Dreamweaver,但是需要安装dmxLessCompilerCC-1.0.1.zxp插件后,方能进行编译。或者直接使用Dreamweaver CC版也可以。 还有一个更好...

java编译器API——使用编译工具

【0】README 0.1)以下内容转自: http://suntips.iteye.com/blog/69002 0.2)for basic java compiler API, please ...

菜鸟教程之工具使用(十七)——7款开源Java反编译工具(转)

今天我们要来分享一些关于Java的反编译工具,反编译听起来是一个非常高上大的技术词汇,通俗的说,反编译是一个对目标可执行程序进行逆向分析,从而得到原始代码的过程。尤其是像.NET、Java这样的运行在...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:SASS界面编译工具——Koala的使用
举报原因:
原因补充:

(最多只允许输入30个字)