How To Compile Sass For Colorlib Templates

Photo by Domenico Loia on Unsplash

Basic instructions for complete beginners..

If you have ever downloaded a Colorlib template and tried to change the Sass you will notice it won't work without compiling it and outputting it as CSS.

One of the easiest ways to do this, in my opinion, is to download Koala.

Once you have downloaded and installed Koala (instructions can be found here), drag your project/Colorlib template into the Koala interface and find your sass file which will end in style.scss.

style.scss is the file you want to compile

When Koala is initially set up — it outputs into the same file. We do not want this. We want our Sass to be compiled and the output to be put into our style.css file.

To do this — right-click on your style.scss file and select set output path. Go into the parent folder that the original style.css file is in and create a new style.css file. It will ask if you want to replace the existing CSS file — choose yes.

Congrats! you are all done! 🎉

To test if your Sass is compiling correctly, you can find the variables file and change your main colour variable to something different. If you have auto compile ticked (as I do in the image above) it should auto compile for you and you will be able to see the change in the browser.

If you do not have auto compile ticked — simply click compile to compile manually.

Ps. This is not only for Colorlib templates — you can use this to compile Sass for any project!

Hope this helps! Happy Coding! 💻