Create a new folder in your CSS Grid project resources named "css". In a text editor create both a custom.css file and a custom.scss file. Add these two files to the resource css folder you created. Link the custom.css file in your resources to the head section in your project.
Next, drag and drop the css folder found in the project_folder/resources that is created on your computer when the project is opened up into Koala.
In Koala, select and open (edit) the custom.scss file with a text editior like Sublime Text and make any additions or changes to the file. (Its important not to have your project in browser preview when making edits or your changes will not take effect). When you save the custom.scss file Koala will auto-compile the changes to the custom.css file in your project resources.
Now when you re-preview in your browser your project the new custom.css changes will be applied to your project. When you save your project, the changes are saved also to both .css and .scss files. Next time you open your project you will have to add the css folder again found in the project_folder/resources to Koala so you can continue to work with the custom.scss file and enjoy SASS.
This brings the power of SASS to real time updating of the custom.css file without having to re-import the custom.css file to the resources every time so now you can see the updated changes. This also provides a full screen text editor to enhance the editing experience which I really like.
Example of powerful SASS mixin using variables:
https://gluexp.coffeecup.com/cssgrid/pr … dscss.html