Utilizing the power of SASS with CSS...
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
It's easy to overlook something you're not looking for.
Here's my S-Drive site with
examples of what can be accomplished in VSD.
Here's my CoffeeCup SCCP Shop with examples of what can be done.
This is a site I built for my work.(RSD)
This is a site I built for use in my job.(HTML Editor)
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
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.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.