Sass The compilation tool of detailed explanation koala

Sass and less are not the same, need to compile locally into CSS to see the effect, so there is a very powerful compiler tool is the most important. If you're not installing Ruby, you've never heard of it; If you install Ruby, but you don't use it, then use koala decisively.

One, Sass Debugging plug-in method

For debugging functions, please output debug information when compiling output, so parsing css file will contain debug information, and then through Firebug or Google's debugging tools can be positioned to our edited Scss file, not the parsed CSS file.

If it is not enough to prepare for sass, you need to allow browsers to support sass. Then you need a browser plug-in to allow the browser to identify sass, so that developers can facilitate development.

For debugging functions, please output debug information when compiling output, so parsing css file will contain debug information, and then through Firebug or Google's debugging tools can be positioned to our edited Scss file, not the parsed CSS file. (Figure 1-1)

Figure 1-1

If your CSS file does not have code beginning with @media-sass-debug-info, the debug information is not output. Please reuse the Koala tool to compile your scss file and make sure that you have checked the debug information option.

In Firefox debugging, only need to download firesass→https://addons.mozilla.org/en-us/firefox/addon/firesass-for-firebug/can be.

　　Second, the compilation Tool Koala installation

1, enter the http://koala-app.com/page

2, according to the system to download the required koala version

3, and then install the downloaded EXE file in the download folder, you can install the successful

　　Third, the compiler tool Koala Advantage

1. Multi-lingual support: Support less, Sass, Coffeescript and Compass Framework.

2, real-time compilation: Listening to files, when the file changes to automatically compile, all in the background run, no manual operation.

3. Compile options: You can set the compilation options for a file in a unified setting, or you can set the compilation options for a file individually.

4, powerful file right key function: Right key file element, can operate open file, open file directory, open output file directory, set output file directory, compile, delete six commonly used functions.

5. Error Tip: If you encounter grammatical errors at compile time, Koala will eject the error message in the lower right corner to facilitate the developer locating the code in the wrong location.

6, Cross-platform: Windows, Linux, Mac can be a perfect operation.

7, free and responsible: Koala completely free, and the author is very responsible for, what problems the author will give a timely response, opinions and what can be directly submitted to the author, generally in the next version can be resolved.

　　Four, the layout area introduction (as Figure 1-2)

Figure 1-2

1, the first area: the first button to add items, the second button to open the compiler file error prompts, the third button set koala, which can be set up all the file default compiler output mode, the need to filter the file, interface language (Chinese/English) and so on. Of course, this also includes the current Koala version number and the author and other information.

2, the second area: Project area, you can directly drag the project into the area

3, the third region: The list of files to compile, the default following underlined files do not appear in the list, green represents the dynamically compiled files, gray means that the dynamic compilation. Click the appropriate file, and the fourth block appears, setting the file compilation options. If your files are added later then click the Refresh button above to refresh the files you need to compile, and of course you can filter the files you want to compile by following a few all/less/sass/coffee.

4, the fourth region: Set file compilation options, this area should be selected in the third area of a file to be compiled to appear. Take sass As an example, the first option indicates whether dynamic compilation is enabled, and the second group indicates whether the four features are enabled, and I'm here to enable debug info for easy debugging, but if you use compass then you have to enable compass; The third group represents the CSS format for the output, Divided into four kinds: nested,compressed,compact,expanded; the last compile button can be compiled manually.

　　v. Use and setup steps

1, the first step: first click on our first area of the Gear button, set the default file compilation method, and the interface language set to Chinese. (Figure 1-3, figure 1-4)

Figure 1-3

Figure 1-4

2. Step Two: Add the project file we want to compile, add it through the plus button in the first area, or drag the item directly to the second project area.

3, the third step: Click We need to compile the file, the fourth regional settings under the specific way to compile the file, if nothing special, directly with the default settings on OK, if you do not need dynamic compilation, directly tick off the "Just-in-time compile" that checkbox, the rest of the operation according to the above said. (Figure 1-5)

Figure 1-5

4, the Fourth step: Right click the file that needs to be compiled, appear our commonly used several operations: Open file, open file directory, open output file directory, set output file directory, compile, delete. Generally here we need to set up the directory of our output files. (Figure 1-6)

Figure 1-6

5, the Fifth step: If your files are both Less,sass and coffee, then it is best to have to click on the following filter conditions, you can select the files you want to dynamically compile. (Figure 1-7)

Figure 1-7

In the use of this software, you should note: When writing fonts, pay attention to SCSS and compiled CSS added:@charset "Utf-8"; If you do not add, you can not compile Chinese fonts.

How to use the Less/sass compiler tool Koala? For everyone to introduce here, hope to help everyone, in the troubled sass or less time, may wish to see a dragon station.