Here is a small project example that shows how you could in real-time customize your custom.css stylesheet with a SASS compiler when your CSS Grid project is open. I use the Koala Compiler as its easy to install.

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

Here is a short video of using a Sass Compiler intergrated with Sublime Text editor to update a custom.scss file in order to output a custom.css stylesheet linked to in the head section from the resources. (Live editing)

https://vimeo.com/263676809

Thanks for looking into this Twinstream. It's awesome having workarounds.

Can it be done with Atom? Atom is free.

I have not tried it with Atom but surely somewhere in Atom's package listing there is a simple file sync addon that will update another file as soon as you save one.

I think the only reason I went the Sublime route was there is more information it seems available for it than Atom, but from what I have read, Atom is top notch.

You could even do the Sass compiling in Sublime and Atom eliminating the Koala Compliler. I use it because its simple, has the ability to add vendor prefixes (autoprefixer) when compiling a Scss to css.

That being said Sublime has a package autoprefixer addon that allows you to specify how far back in browser versions you would like to support.

I took the videos down because there did not seem to be much response or interest in live Sass support or editing custom css or js files with advanced editors.