Koala is a GUI application that helps web developers to compile SASS. This SASS compiler can quickly generate CSS from the SCSS files. Moreover, it is a FREE application for Windows, Mac, and Linux operating systems.
This application offers a real-time compilation option. It keeps watching files and compiles automatically when the file changes. Everything is running in the background without a user manual compile command. Additionally, if there is an error during compilation, Koala will pop up the error message.
It also provides multi-language support and extensive documentation.
In this tutorial, I will show you step-by-step guidelines for compiling CSS files from the SASS files.
✅ Step 01: Download Koala
Koala SASS compiler offers free applications for different platforms. You can download a suitable application based on your operating system from this link.
http://koala-app.com/
✅ Step 02: Install Koala
Next, install the application. It will take a few minutes to complete the installation process. Once the application installation is done, open it, and you will see the following interface (it may vary based on operating system and application version).
✅ Step 03: Setup Koala
- Click on the settings icon.
- From the General tab, uncheck the "Automatically ….. reloaded" checkbox.
- Finally, click the Ok button.
✅ Step 04: Add the SCSS files
Click the + icon to add the SCSS source folder.
✅ Step 05: Navigate the source folder
From your computer, choose the "src" folder.
✅ Step 06: Generate the output
The "styles.scss" and "styles-rtl.scss" files will generate the output CSS file.
✅ Step 07: Setup the output path
Next, we need to set the output path of the SCSS file. Right-click on the "styles.scss" file name and click on the "Set Output Path".
✅ Step 08: Save the CSS file
- Navigate to the CSS directory and click on the styles.css file.
- Finally, click on the "Save" button.
✅ Step 09: Updated output path
Now, you will see that the output file path has been changed.
✅ Step 10: Reload the source folder
Next, click on the src tab and select Reload from there. It will refresh all the changes.
✅ Step 11: Setup automatic reload
All done. Now, if you want the automatic reload option, restore the following settings.
Now, you know how to compile SASS files using the Koala compiler.
