Graphical interface compiler tool Koala to compile sass files into CSS files

Article Introduction: This article mainly through the creation of a SASS project as an example, to lead you to use koala such a graphical interface compiler tool to your SASS project, sass file compiled into a CSS file.

The "codekit" graphical tool compiles sass project in the article "The use of theSass Interface compiler tool--codekit ". Because Codekit is a paid tool and can only be used in Macs, many sass enthusiasts in the country, or beginners can not experience the Codekit tool to compile Sass project. Fortunately, there is a domestic graphics tool Koala and codekit function is very similar, supporting a number of platforms , but also open source.

Koala

Koala is a front-end preprocessor language graphics compilation tool that supports less, Sass, Compass, and Coffeescript, and helps web developers use them more efficiently for development. Run across platforms, perfectly compatible with Windows, Linux, and Mac. In this article, however, we only describe how to compile the Sass project with Koala .

Koala Characteristics

Before introducing how to use Koala , let's take a quick look at the functional features of Koala :

• Support multi-language: support less,SASS,coffeescript and Compass;
• Real-time compilation: Listening to files, when the file changes automatically compile, all of this in the background running, no manual operation;
• compilation options: You can set compilation options for each language;
• Code Compression: Less and sass support the automatic compression code after compiling;
• Error Tip: If you encounter syntax errors at compile time, provide error information log to facilitate developers to locate code error location;
• run across platforms: It works perfectly on Windows,Linux , and Mac OS X multiple platforms.

Koala Download and installation

If you decide to use Koala to compile your sass project, you will have to install a Koala first. If you are using Koalafor the first time, you can download the corresponding version to his website because Koala provides installation files for multiple environments:

• Windows
• Mac OS X 10.7+
• Linux:32bit/64bit
• Ubuntu:32bit/64bit

Download the version you want directly click on the installation file, step by step on the OK, here will not do too much elaboration.

Create a project

To let Koala to compile Sass project, the first condition is to have SASS project, otherwise Ching, nothing can do. Since I created a sass project in my own project directory, I created a project called Koalasass. (I usually like to put items in a directory called sites). Create a sass directory at the same time, put the project's so. scss files in this directory:

Koala Use

The use of koala is actually very simple, the first step you start your installation in the local koala, you will see a very refreshing interface:

The entire interface is very simple, with three buttons in the upper-left corner: "Add Item", "Error Log", and "Configure", in the entire right main area, by default the "project" interface is loaded. As shown in the following figure.

Add Project

Koala add Sass Item is very simple, you can click on the top left corner of the + (add) button, find your Sass project, and then confirm put in:

At this point you are in the Koala panel and you can see the sass items that have been added:

In addition to this approach, there is a simpler way to add sass items to the Koala panel, which is to drag your items directly to the right area of the panel:

Once your sass item is dragged to the Koala main content panel area, loosen your left mouse button, and the Sass item you drag and drop is placed in koala, in other words, add Project success:

Delete items

Sometimes you might want to clean up the sass items in the Koala panel, because there are too many tests, you want to complete a real project, and don't want other useless items to interfere with your view, then you can delete them. Deleting items in Koala is also very simple.

You just koala the left column of the project area, with the mouse "right" click on the item you want to delete, select the "Delete" menu item, you easily delete the sass you want to delete the item:

Compiling SASS Projects

In the first few steps, we have successfully added the Koalasass project to the Koala panel, because there is no SASS code in our Style.scss file, let's try to edit it and add the following code to the Style.scss file:

This is sass file  $color: #888; $bgColor: #f36;  Header {     color: $color;     

Save the Style.scss file you modified.

Witness the magic of the time, when you save Style.scss file completion of the moment, Koala automatically help you complete. scss files are translated into. css files, and the translated. css files are placed under the CSS directory:

A simple look at the compiled CSS is not correct:

Header {   color: #888888;   

It's amazing.

Error correction function

Koala and Codekit, with the debug function, when your sass file has a problem, he will give you an error, tell you where the sass error. This is very useful for us, can quickly help us find the location of the error code, quickly let you correct the code.

Let's also look at a simple example where we change the $ symbol of the definition to the # symbol, and then save your modified Style.scss file:

This is sass file  #color: #888; $bgColor: #f36;  Header {     color: #color;     

You'll get an error message at the top right corner of your computer screen (shown in the lower right corner of the screen below win):

If you accidentally, let the error message disappear, you can go to the editor to save the Scss file again, then this error message will automatically appear. If you're having trouble, you can go directly to the Koala panel to view the record of the error message:

Koala feature settings

It only demonstrates some of the basic operations of the Koala tool, but he also offers some other powerful features that you can set up in the Koala feature Settings panel.

How to set, there is no need to do too much elaboration, because different language corresponding to different parameter settings, for SASS language, so a few, a see the branch is gone, the specific role, we can check the word, really do not want to check, directly point to try, a try on the clear. (^_^)

Other features of Koala

Koala also provides some common right mouse buttons, and you can also have multiple or selected files in the project, as shown in the following illustration:

the combination of koala and compass

You may remember codekit can and compass frame perfect combination, often use compass classmate, must be inseparable from him, left you always feel less, you will be frustrated, you will be difficult to sleep. But when you don't think about it, using koala, he won't let you down or make you lose sleep, because he's thinking for you.

The compass framework is also implanted in the koala, but it is still being developed by the Koala team, but it can now be used, but only slightly less than Codekit. Next we'll look at how to use compass in koala.

The first and most important step, under your project root, is to create a config.rb file for the Compass framework and configure the relevant parameters in the file:

# 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 = "imag Es "Javascripts_dir =" javascripts "Fonts_dir =" Fonts "  Output_style =: nested  # To enable relative paths to asset s via Compass helper functions. Uncomment: # relative_assets = True  # To disable debugging comments that display the original location of your Selecto Rs. Uncomment: # line_comments = False Color_output = False   

After the config.rb file configuration is complete, we can use compass in the koala. In the file area of the Koala panel, right-click your sass item and select the corresponding menu item as shown in the following figure:

Then koala will appear with a prompt to ask you if the config.rb file already exists and whether you need to edit it:

If your config.rb file has already been edited, you can click the Cancel button to continue with the work below.

This time when you edit the. scss file in the project, the koala is automatically compiled into a. css file and then the corresponding directory, which is related to the configuration in CONFIG.RB.

Of course there is a better way, that is, you need to create Compass Sass Project, in the root to create a good config.rb file, and configure, and then add the project as previously, directly add the project to the Koala panel is OK.

The "Project setting for Compass" in the base is powerful, and you can configure Koala-config.json files to suit your needs. If you're just a normal need, you don't have to do this, koala yourself can help.

While the koala and compass frameworks are relatively slightly experienced, I believe the later versions will definitely improve.

Summary

This article mainly through the creation of a SASS project as an example, to lead you to use koala such a graphical interface compiler tool to your SASS project, sass file compiled into a CSS file.

So there's a simple introduction to how to use koala to compile sass operations. More detailed information about koala can be clicked here .

Finally, thank you very much for the meticulous guidance of the friend Ethan Lai , and thank you very much for Max DengandLeott Liuin the Koala team. If you have any ideas or improvements to koala, you can comment directly in the comments below, Koala team members will be resolved in a timely manner.