Compile tool Codekit: Compile the sass into a good CSS

Article Introduction: the use of the Sass Interface compiler tool--codekit.

In theSass compilation andnodejs+grunt configuration Sass Project Automatic compilation tutorial, we detail the translation tasks that use sass and the grunt command to complete the SASS project, where you can also use sass- Watch and Grunt watch commands are implemented to monitor SASS projects from time to time, and once any sass files are modified, the Sass files are automatically translated into CSS.

Of course, we can through the system with the command line or other terminal command tools to achieve SASS compiler work, but for the front-end designers, although often used to remember these commands, will eventually feel unaccustomed. To do this, we can use app apps to help us complete sass compilation, and then say goodbye to using commands to translate sass.

So far, there are countless interface tools for Sass compilation, such as:Scout,codekit,livereload,Compass,Fire As well as the domestic compilation tool Koala and so on. The first few are paid tools, and only Koala are free.

We don't make too many comments and comparisons when it's good or bad. From my personal departure, I tend to be more Codekit,Compass and Koala. Because Compass can't get a cracked version, and Codekit doesn't have much of a difference, I've installed codekitin my Mac system. To share with you today a little experience of using Codekit .

Introduction and installation of Codekit

Codekit can help create Web sites faster and better. can also be used for you, help you to compile sass into a very good CSS. He can help you with a lot of things, such as: less, Sass, Stylus, Jade, Haml, Slim, Coffeescript, and Javscript can be compiled into what you need. As well as browser reload, code compression, optimized image and Jshint & JSLint functions, but we only use him to compile sass. First from the codekit official website download down to install him (to the United States Knife yo, find a cracked version of it). After installation follow us to continue looking down, I think you will like Codekit.

To create a test project

In order to start using Codekit to compile sass, you need to create a project, create a sass in your project, and save all sass files to the Sass directory. For example, a project called "Codekitsass" is created where a sass directory is placed and a test file is created Style.scss:

Only the project exists, and the sass code without testing is not able to show you how "Codekit" compiles sass into CSS, so the SASS code is written in Style.scss file:

Codekit Basic Use

After the completion of the test project, you can actually learn Codekit operations, master Codekit How to compile sass into CSS.

Start your Installed "Codekit" first:

In the Codekit panel, click the lower left corner plus + to add the newly created Codekitsass item to the Codekit file area:

When your SASS project is added to the "Codekit" file area, "Codekit" automatically finds all SASS files in your SASS project:

Select the. scss file that you want to compile, set the corresponding parameter in the "parameter setting area" on the right in the Panel, and then click the Green "Compile" button in the lower-right corner of the panel, and "Codekit" translates the. scss file in the selection into a. css file:

If you do not know if "Codekit" will sass compile successfully, in addition to return to the file directory to view, you can also click on the "Codekit" panel log, see "Codekit" compiled "log" information.

This time back to the "Codekitsass" project you just created, you can see that "Codekit" compiles the Style.scss file in the Sass directory into a style.css file and places the file in the CSS directory:

Once you have added a project successfully in "Codekit", as long as you have modified any sass file in the project, "Codekit" automatically compiles the sass file into a CSS file as long as you save the file, which is similar to the Sass--watch feature. Once again, look at the "Log" message and you can see the new information:

"Codekit" is very clever, when you write an invalid sass code, "Codekit" in compiling sass will be error, and in the "Log" can also find the corresponding error information. This work is very powerful and very useful, and he can help us debug the relevant Sass code. For example, in sass we define variables by using $, and we do a test experiment that converts the $ symbol for the definition variable to #, and then saves the modified Sass file. There will be an error in "Codekit":

The error mechanism of "Codekit", like other validators, is not always easy to understand validation errors. But this error mechanism, for us to help very much, it can help point to Sass code where the error occurred, let you first find the wrong place, and correct.

the perfect combination of codekit and compass

If you read the article "Sass compiling ", I think you are not unfamiliar with Compass . In the article we learned that Compass is a very powerful sass framework. Sass combined with Compass can save you a lot of trouble because it includes a lot of built-in sass features and effects. What it contains, I'm not sure, if you want to know what compass contains, you can either bash here or clone compass to your local by following the command:

Compass and sass together, we can implement in the command line, in addition, can also be done through the Compass.app interface. Then there are people who are thinking, whether in the Codekit into the compass framework, so that your sass project more perfect. Next, let's look at how codekit and compass are fully knot-created sass projects.

Before starting to use, fake settings you have installed sass and Codekit. You can open your command terminal or other command tool and enter it in:

Install COMAPSS

Detect version number

Create a Compass+sass Project

Enter the directory where you want to create the Compass+sass project:

The detailed introduction everybody can read "sass compiles " The article, here we just again recalls the Compass and sass How together creates the SASS project which has the "Compass" framework.

As we go back to today's topic, we also create a test project called "Compasssass" and put it in the Sites directory (because all of my projects are placed under the Sites directory).

Now in the "Compasssass" project, we don't have any files or directories:

Add the "Compasssass" item to the file area of the Codekit panel as in the previous method:

The key time, with the mouse in the "Codekit" Panel of the file area to select your project, and the right mouse click items, as shown in the following figure, make a choice:

Note : Your compass project must use a config file to guide the "Codekit" work. You can create it from the command line, or you can use Codekit to create it.

In the Codekit panel, right-click the item selection Compass→use Compass on this project will pop up a dialog box:

Once you tell Codekit to use Compass to create this project, Codekite requires a config.rb file that supports compass, and if a config.rb file is not configured, now we have to have Codekit create a new config.rb file. From the figure above we can see that there are three ways to create config.rb files:

Create a new config.rb file

Select the "New Config File" button in the pop-up dialog box:

The config.rb file is generated at this time, as follows:

# 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 Selecto Rs. Uncomment: # line_comments = False Color_output = False   

Install Compass

Select the Install Compass button to generate the Config.rb file:

The resulting config.rb file is basically similar to the file content that was generated earlier:

# 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 Selecto Rs. Uncomment: # line_comments = False Color_output = False   

Using local CONFIG.RB files

The third method is that you already have a local config.rb file, we can click the "Locate" button to load the local config.rb file:

Any of the above methods will help you to easily complete the Codekit create Compass+sass project, just the third main method, you need to create a config.rb file, if you are not familiar with the creation of CONFIG.RB files, I recommend that you use the first or second method.

As I said before, Codekit in addition to the above features, there are other more interesting features, you can do Codekit system settings, according to your requirements for detailed settings:

In the pop-up dialog box, you can slowly set up:

How to set, I will not say more, interested can refer to Codekit official website .

Extended Reading

• Codekit
• Compass
• ACTIVATE COMPASS captain
• Sass for Designers-the Setup
• Using Codekit
• Codekit and SASS