How To Make Any WordPress Theme Or Plugin SASS Ready With Instant IDE

Right after launching the Themer Pro and Instant IDE updates I received several similar questions regarding how to make any WP Theme or Plugin SASS ready when it comes to working with these Instant IDE updates. So I figured a tutorial and screencast was in order...of course. 🙂

The basic premise is as follows:

  • Using Instant IDE, right-click on your Theme or Plugin folder and select "Set As DEV Path" in the drop-down menu. This will eventually result in the reloading of Instant IDE, now with that directory being the root.

  • Create a cobalt-scss.json file (you'll find some example code that you can use for this file HERE) and place it in the root of your Theme or Plugin.

  • Edit your cobalt-scss.json file to reflect the folder structures and names .scss files. You can also configure your images directories as well if you want to set that up too. Learn more about how to properly edit this Cobalt SASS config file HERE.

  • If you haven't already done so, add your .scss files to the locations specified by your Cobalt SASS config file. Now edit one of your .scss files and see if it compiles.

Note that it's easy to miss something simple in that config file, so if you get a message telling you to double-check it, just keep tweaking it, making sure it accurately matches your setup, and it should work for you. But if not just let us know and we'll be happy to help. 🙂

You can see this in action here:

Youtube Video

@eric Hey Eric,

Wow, I really wish you had led with this information in your blog post. I was thinking not too kind words when I updated my Instant IDE and did not find a way to use the SASS update. I was beginning to think I was going to have to purchase Themer Pro to get Instant IDE to work. Once I found the new forum and saw this video, it was easy to set up the json file required to get Instant IDE to compile the SASS on my themes. Happy Times 🙂

Having said that, this is a awesome job you did Eric to integrate SASS, as well as the other build tools, into Instant IDE. This is really a game changer for development workflow. No longer will we have to download a site to a local environment just to make custom CSS changes. I am sure this will be a great help to others as well once they find out about it.

Congrats Eric on the new forum as well. It was a bit of a learning curve to get started. I spent 20 minutes trying to get a suitable password to work when registering, and it seems the quick reply button is not working. I had to retype this message twice. The first time I clicked the quick reply button and nothing happened, then I clicked the reply button, which wiped out my message, so had to start over. Then I put the message in the reply window that opens. Other than those things, I really like the new clean fresh look.

Thanks again,

Rob

@robwebdev Hry Rob,

Regarding the quick reply button, I just looked on the NodeBB Github repo and it looks like this is a known bug that they will fix soon. In the mean time I just hid the quick reply area using CSS to prevent anymore confusion until the issue is resolved.

And yes, I really like the clean look and feel and that it all runs off of JS instead of PHP. It makes for a really fast and smooth UI!

I agree that this post would have been a nice thing to include in my original post. Honestly I never really know what will be the crucial information regarding notable announcements until I start getting feedback from members. But once I get them it's like a big "duh!" moment for me. 🙂

I appreciate the positive feedback as well! I worked hard on these updates and this forum and am really looking forward to establishing more consistency in my resource offerings and a more wide open support solution that benefits more of the community as a whole instead of just the single members that email into us.

And regarding Instant IDE specifically, yes, to me it's really a game changer! I use it ALL THE TIME and I hear about more and more members who have the same experience. It's just so much easier and more convenient to use on live sites (and even dedicated DEV sites) than the more traditional approach. The key is to make the actual tools iIDE provides more and more capable and like those you'd find in your standard pro DEV toolbox. I believe that what these kinds of updates are doing and I'm excited to see how our members utilize it over time.