How to Use the Less/Sass compilation tool koala

I. SASS plug-in debugging method

If debugging is required, output the debug information during compilation and output. The parsed css file contains the debug information, then, we can use firebug or Google's debugging tool to locate the scss file we edited, rather than the parsed css file.

If SASS preparation is not enough, the browser must support SASS. A browser plug-in is required for the browser to recognize SASS, so that developers can develop the SASS easily.

If debugging is required, output the debug information during compilation and output. The parsed css file contains the debug information, then, we can use firebug or Google's debugging tool to locate the scss file we edited, rather than the parsed css file. (1-1)

If there is no code starting with @ media-sass-debug-info in your css file, the debug information is not output. Use the koala tool again to compile your scss file and confirm that the debug information option has been selected.

To debug Firefox, you only need to download FireSass → https://addons.mozilla.org/en-us/firefox/addon/firesass-for-firebug.

　　

1. Go to http://koala-app.com/page

2. download the required koala version based on the system.

3. Install the downloaded EXE file in the downloaded folder.

Iii. Advantages of the compilation tool koala

1. multi-language support: supports Less, Sass, CoffeeScript, and Compass Framework.

2. Real-time Compilation: monitors files and automatically performs Compilation When the files change. All of these operations are performed in the background without manual operations.

3. Compilation options: You can set both the compilation options of a file and the compilation options of a file.

4. Powerful file right-click function: Right-click the file element to open the file, open the file directory, open the output file directory, set the output file directory, compile and delete six common functions.

5. error message: If a syntax error occurs during compilation, koala will pop up an error message in the lower right corner to help developers locate code errors.

6. cross-platform: windows, linux, and mac can run perfectly.

7. free and responsible: koala is completely free of charge and the author is very responsible. The author will give a prompt reply to any questions. You can directly submit your comments to the author, it can be solved in the next version.

4. Introduction to the layout area (1-2)

1. Area 1: The first button is used to add a project, the second button is used to open the compilation file error prompt, and the third button is set to koala, which can set the default compilation and Output Modes for all files, files to be filtered, interface languages (Chinese/English), etc. Of course, this section also contains the current koala version number and author information.

2. Area 2: project area. You can drag the project directly to this area.

3. Area 3: List of files to be compiled. By default, files starting with the following line do not appear in the list. Green indicates the files for dynamic compilation, and gray indicates non-dynamic compilation. Click the corresponding file and the fourth block appears. Set the file compilation option. If your file is added later, click the refresh button above to refresh the file to be compiled, of course, you can also use the following all/less/sass/coffee to filter the files you want to compile.

4. Area 4: Set the file compilation option. You must select a file to be compiled in the third area. Take sass as an example. The first option indicates whether to enable dynamic compilation. The second option indicates whether to enable these four functions. For convenience of debugging, debug info is enabled, of course, if you use compass, You have to enable compass. The third group represents the output css format, which can be divided into four types: nested, compressed, compact, and expanded. The last compile button can be compiled manually.

　　

1. Step 1: Click the gear button in the first region, set the default file compilation method, and set the interface language to Chinese. (1-3, Figure 1-4)

2. Step 2: add the project file to be compiled. You can click the plus sign in the first area to add the project, or drag the project to the second project area.

3. Step 3: click the file to be compiled, and the specific compilation method of the file is displayed in Area 4. If there is nothing special, use the default setting directly, if dynamic compilation is not required, the checkbox "real-time compilation" is directly removed, and the rest follow the operations described above. (1-5)

4. Step 4: Right-click the file to be compiled, and several common operations are displayed: open the file, open the file directory, open the output file directory, set the output file directory, compile and delete. Generally, we need to set the directory of the output file. (1-6)

5. Step 5: If your file contains less, sass, and coffee, you 'd better select the file to be dynamically compiled by clicking the filter conditions below. (1-7)

How to Use the Less/Sass compilation tool koala? I will introduce it to you here, hoping to help you. When you are troubled by sass or less, you may wish to go to Menglong xiaozhan.