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

编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。 点击链接查看最新前端内容,或到各大应用市场搜索「 掘金」下载APP,技术干货尽在掌握中。

在《SASS编译》和《Nodejs+Grunt配置SASS项目自动编译》教程中,我们详细介绍了使用sass和使用grunt命令完成SASS项目的转译任务,其中还可以使用sass --watchgrunt watch命令实现时时监控SASS项目,一旦修改任何SASS文件,都会自动将SASS文件转译成CSS。

当然,我们可以通过系统自带的命令行或者其他的终端命令工具,实现SASS的编译工作,但对于前端设计人员而言,虽然常用能记得住这些命令,终究会觉得不习惯。为此,我们可以使用APP应用来帮助我们完成SASS编译工作,从此告别使用命令来转译SASS。

目前为止,有关于SASS编译的界面工具数不胜数,例如:ScoutCodeKitLiveReloadCompassFire以及国产的编译工具Koala等。其中前几款都是付费工具,唯有Koala是免费的。

孰好孰坏,我们不做过多的评论与对比。从我个人出发,我更趋向于CodeKitCompassKoala。由于Compass无法获取到破解版本,同时CodeKit与之无太多区别,所以在我的Mac系统中,我安装了CodeKit。今天特意和大家一起分享一下使用CodeKit的一点经验。

CodeKit简介与安装

CodeKit可以帮助更快更好的创建网站。也可以为你所用,帮你将SASS编译成很好的CSS。他可以帮你处理很多事情,比如说:可以将Less、Sass、Stylus、Jade、Haml、Slim、CoffeeScript和Javscript等编译成你自己需要的东西。以及浏览器重新加载、代码压缩、优化图像和JSHint & JSLint等功能,但是我们这里仅使用他来编译SASS。首先从CodeKit官网下载下来安装他(要美刀哟,找个破解版本吧)。安装后跟着我们继续往下看,我想你会喜欢上Codekit的。

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

创建测试项目

为了能开始使用Codekit编译SASS,需要创建一个项目,并在项目中创建SASS,并且将所有SASS文件保存到sass目录中。例如此处创建了一个名叫"codekitSass"的项目,里面放置了一个sass目录,并且创建一个测试文件style.scss

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

只有项目存在,而没有测试的SASS代码,是无法向大家演示“CodeKit”如何将SASS编译成CSS, 因此在style.scss文件中写了SASS的代码:

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

Codekit基本使用

测试项目创建完成之后,就可以实际学习CodeKit的操作,掌握Codekit如何将SASS编译成CSS。

首先启动您安装好的"Codekit":

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

在"CodeKit"面板中点击左下角加号+,将刚才新创建的codekitSass项目添加到"CodeKit"文件区域中:

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

当你的SASS项目添加到"CodeKit"文件区域之后,“Codekit”会自动找到您SASS项目中的所有sass文件:

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

选择要编译的.scss文件,在面板中右边“参数设置区域”设置对应的参数,最后点击面板右下角那个绿色的“Compile”按钮,"CodeKit"会将选择中的.scss文件转译成.css文件:

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

如果你不知道"CodeKit"是否将SASS编译成功之时,除了回到文件目录中查看之外,你还可以在“CodeKit”面板中点击Log,查看"CodeKit"编译之后的"Log"信息。

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

这个时候回到刚才创建的"codekitSass"项目,你可以看到“codekit”把sass目录下的style.scss文件编译成style.css文件,并且把这文件放置在css目录下:

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

在"CodeKit"中添加项目成功之后,只要修改了项目中的任何SASS文件,只要你保存这个文件之后,“CodeKit”会自动将SASS文件编译成CSS文件,其功能类似于sass --watch功能。这个时候再次查看“Log”信息,你可以看到新增的信息:

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

"CodeKit"很聪明,当你写了一个无效的SASS代码之后,"Codekit"在编译SASS的时候就会报错,而且在“Log”中也能找到对应的报错信息。这一功有非常强大,也非常有用,他可以帮助我们Debug相关的 SASS代码。例如,在SASS中,我们定义变量是使用$,我们来做一个测试性的实验,将定义变量的$符号换成#,然后保存修改的SASS文件。在“CodeKit”中将会报错:

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

“CodeKit”的报错机制,如同其他的验证器一样,并不总是容易理解验证错误信息。但这个报错机制,对于我们来说帮助非常大了,它可以帮助指向SASS代码发生错误的位置,让你第一时间找到出错的地方,并且纠正过来。

CodeKit与Compass的完美结合

如果您阅读了《SASS编译》一文,我想你对Compass并不会太陌生。在文中我们了解到Compass是一个很强大的SASS框架。SASS结合Compass可以让你省去很多麻烦事情,因为他里面包括了很多内置的SASS功能与效果。具体里面包含了什么,我也很不清楚,如果您想了解Compass包含了什么,你可以猛击这里或者通过下面命令将Compass克隆到你的本地:

$ git clone https://github.com/chriseppstein/compass.git

Compass 和SASS结合在一起,我们可以在命令行中实现,除此之外,还可以通过Compass.app界面工个完成。那么前人就有人在思考,能否在CodeKit中容入Compass框架呢,让你的SASS项目更具完美。接下来,我们来看看CodeKit和Compass是如何完全的结全在一起创建SASS项目。

在开始使用之前,假设置你已经安装了SASS和CodeKit。你可以打开你的命令终端或者其他命令工具,在里面输入:

安装Comapss
$ gem install comapss
检测版本号
$ compass -v
创建Compass+Sass项目

在需要创建Compass+Sass项目的目录下输入:

$ compass create Your-Project-Name

详细的介绍大家可以阅读《SASS编译》一文,此处我们只是再次回忆了一下compasssass如何结合在一起创建具有"Compass"框架的SASS项目。

我们回到今天的主题之上来,同样我们创建一个测试项目,名叫“compassSass”的项目,并且放置在Sites的目录下(因为我的所有项目都是放置在Sites目录下)。

现在在"compassSass"这个项目中,我们没有任何文件和目录:

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

按照前面的方法,将"compassSass"项目添加到“CodeKit”面板的文件区域中:

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

关键时刻到了,用鼠标在"CodeKit"面板的文件区域选择你的项目,并用鼠标右键点击项目,按照下图所示,做出选择:

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

注意:你的Compass项目必须要用一个config文件来引导"CodeKit"工作。你可以通过命令行来创建,也可以使用codekit来创建。

在"CodeKit"面板中右击项目选择CompassUse Compass on this project将会弹出一个对话框:

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

一旦你告诉CodeKit使用compass创建这个项目,CodeKite需要一个支持compass的config.rb文件,如果没有配置一个config.rb文件,现在我们必须让CodeKit创建一个新的config.rb文件。从上图中我们可以得知创建config.rb文件有三种方法:

创建一个全新的config.rb文件

选择弹出对话框的“New Config File”按钮:

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

此时生成config.rb文件,内容如下:

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
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
安装Compass

选择“Install Compass”按钮来生成config.rb文件:

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

此时生成的config.rb文件与前面生成的文件内容基本类似:

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
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
preferred_syntax = :scss
使用本地config.rb文件

第三种方法就是你本地已经存在一个config.rb文件,我们可以点击“Locate”按钮,加载本地的config.rb文件:

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

上面任意一种方法都将帮你轻松完成CodeKit创建Compass+Sass项目,只是第三种主法,需要你创建一个config.rb文件,如果你对创建config.rb文件不熟悉,我建议您使用第一种或第二种方法。

正如前面所言Codekit除了上面的功能之外,还有其他更有意思的功能,也你可以进行CodeKit系统设置中,按照您的需求进行详细设置:

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

在弹出的对话框,你就可以慢慢设置了:

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

如何设置,我就不多说了,有兴趣的可以参阅CodeKit官网

扩展阅读

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

返回顶部