| 文章简介：SASS界面编译工具——Codekit的使用. |
在《SASS编译》和《Nodejs+Grunt配置SASS项目自动编译》教程中，我们详细介绍了使用sass和使用grunt命令完成SASS项目的转译任务，其中还可以使用sass --watch和grunt watch命令实现时时监控SASS项目，一旦修改任何SASS文件，都会自动将SASS文件转译成CSS。
当然，我们可以通过系统自带的命令行或者其他的终端命令工具，实现SASS的编译工作，但对于前端设计人员而言，虽然常用能记得住这些命令，终究会觉得不习惯。为此，我们可以使用APP应用来帮助我们完成SASS编译工作，从此告别使用命令来转译SASS。
目前为止，有关于SASS编译的界面工具数不胜数，例如：Scout、CodeKit、LiveReload、Compass、Fire以及国产的编译工具Koala等。其中前几款都是付费工具，唯有Koala是免费的。
孰好孰坏，我们不做过多的评论与对比。从我个人出发，我更趋向于CodeKit、Compass和Koala。由于Compass无法获取到破解版本，同时CodeKit与之无太多区别，所以在我的Mac系统中，我安装了CodeKit。今天特意和大家一起分享一下使用CodeKit的一点经验。
CodeKit简介与安装
CodeKit可以帮助更快更好的创建网站。也可以为你所用，帮你将SASS编译成很好的CSS。他可以帮你处理很多事情，比如说：可以将Less、Sass、Stylus、Jade、Haml、Slim、CoffeeScript和Javscript等编译成你自己需要的东西。以及浏览器重新加载、代码压缩、优化图像和JSHint & JSLint等功能，但是我们这里仅使用他来编译SASS。首先从CodeKit官网下载下来安装他（要美刀哟，找个破解版本吧）。安装后跟着我们继续往下看，我想你会喜欢上Codekit的。
创建测试项目
为了能开始使用Codekit编译SASS，需要创建一个项目，并在项目中创建SASS，并且将所有SASS文件保存到sass目录中。例如此处创建了一个名叫"codekitSass"的项目，里面放置了一个sass目录，并且创建一个测试文件style.scss：
只有项目存在，而没有测试的SASS代码，是无法向大家演示“CodeKit”如何将SASS编译成CSS， 因此在style.scss文件中写了SASS的代码：
Codekit基本使用
测试项目创建完成之后，就可以实际学习CodeKit的操作，掌握Codekit如何将SASS编译成CSS。
首先启动您安装好的"Codekit"：
在"CodeKit"面板中点击左下角加号+，将刚才新创建的codekitSass项目添加到"CodeKit"文件区域中：
当你的SASS项目添加到"CodeKit"文件区域之后，“Codekit”会自动找到您SASS项目中的所有sass文件：
选择要编译的.scss文件，在面板中右边“参数设置区域”设置对应的参数，最后点击面板右下角那个绿色的“Compile”按钮，"CodeKit"会将选择中的.scss文件转译成.css文件：
如果你不知道"CodeKit"是否将SASS编译成功之时，除了回到文件目录中查看之外，你还可以在“CodeKit”面板中点击Log，查看"CodeKit"编译之后的"Log"信息。
这个时候回到刚才创建的"codekitSass"项目，你可以看到“codekit”把sass目录下的style.scss文件编译成style.css文件，并且把这文件放置在css目录下：
在"CodeKit"中添加项目成功之后，只要修改了项目中的任何SASS文件，只要你保存这个文件之后，“CodeKit”会自动将SASS文件编译成CSS文件，其功能类似于sass --watch功能。这个时候再次查看“Log”信息，你可以看到新增的信息：
"CodeKit"很聪明，当你写了一个无效的SASS代码之后，"Codekit"在编译SASS的时候就会报错，而且在“Log”中也能找到对应的报错信息。这一功有非常强大，也非常有用，他可以帮助我们Debug相关的 SASS代码。例如，在SASS中，我们定义变量是使用$，我们来做一个测试性的实验，将定义变量的$符号换成#，然后保存修改的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编译》一文，此处我们只是再次回忆了一下compass和sass如何结合在一起创建具有"Compass"框架的SASS项目。
我们回到今天的主题之上来，同样我们创建一个测试项目，名叫“compassSass”的项目，并且放置在Sites的目录下（因为我的所有项目都是放置在Sites目录下）。
现在在"compassSass"这个项目中，我们没有任何文件和目录：
按照前面的方法，将"compassSass"项目添加到“CodeKit”面板的文件区域中：
关键时刻到了，用鼠标在"CodeKit"面板的文件区域选择你的项目，并用鼠标右键点击项目，按照下图所示，做出选择：
注意：你的Compass项目必须要用一个config文件来引导"CodeKit"工作。你可以通过命令行来创建，也可以使用codekit来创建。
在"CodeKit"面板中右击项目选择Compass→Use Compass on this project将会弹出一个对话框：
一旦你告诉CodeKit使用compass创建这个项目，CodeKite需要一个支持compass的config.rb文件，如果没有配置一个config.rb文件，现在我们必须让CodeKit创建一个新的config.rb文件。从上图中我们可以得知创建config.rb文件有三种方法：
创建一个全新的config.rb文件
选择弹出对话框的“New Config File”按钮：
此时生成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文件：
此时生成的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文件：
上面任意一种方法都将帮你轻松完成CodeKit创建Compass+Sass项目，只是第三种主法，需要你创建一个config.rb文件，如果你对创建config.rb文件不熟悉，我建议您使用第一种或第二种方法。
正如前面所言Codekit除了上面的功能之外，还有其他更有意思的功能，也你可以进行CodeKit系统设置中，按照您的需求进行详细设置：
在弹出的对话框，你就可以慢慢设置了：
如何设置，我就不多说了，有兴趣的可以参阅CodeKit官网。
扩展阅读
- CodeKit
- Compass
- ACTIVATE COMPASS CAPTAIN
- Sass for Designers — The Setup
- Using Codekit
- CodeKit and SASS
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索grunt
， 编译
， 文件
， sass
， 项目
， compass
， compasssass
编译项目
，以便于您获取更多的相关知识。