As of Themer Pro 1.1.0 and Instant IDE 1.2.0 you can now compile both SASS and LESS into CSS without any outside scripts, server configurations, or frustration. This is due to the SCSS PHP and LESS PHP scripts that are now integrated into these two Plugins, with the addition of a .json configuration file (which I'll talk about below) that allows for simple setup for even the most complex SASS and LESS file structures.

A Common Setup Example

The quickest way to get started compiling .scss files using either Themer Pro or Instant IDE is to first use the Themer Pro "Theme Creator" feature to create either a "Genesis Sample Sass" or "Freelancer Child Sass" Child Theme. Once created and then activated you'll now have a "sassified" Child Theme that has both the .scss files and cobalt-scss.json configuration file setup and ready to go!

At that point you should be able to just edit that Child Theme using either Themer Pro or Instant IDE, with changes to the included .scss files resulting in the primary style.css file being updated with each save.

A Note Regarding Instant IDE...

For the cobalt-scss.json configuration file to work properly it has to be in the root of the DEV environment. Themer Pro, by default, provides this setup through the "Child Editor" admin page. Instant IDE, however, defaults to the root of the actual WordPress installation instead. So to work with these Cobalt sassified Child Themes you just need to locate the Child Theme folder in question (located in /wp-content/themes/) and then simply right-click the Child Theme folder and select the option to "Set As Dev Path". This will ultimately result in the reloading of Instant IDE, at which time the cobalt-scss.json file should now be at the root of your DEV environment. And from there you should now be able to edit your .scss files and have them automatically compile to the primary style.css file with each save.

Build Tool Badges

With Themer Pro, when you're editing a SASS or LESS file, you should see an appropriate build tool badge at the top-center of the editor box like so...

themer-pro-sass-badge.png

With Instant IDE you don't have to be actively editing such files for the build-tool badges to appear, you simply need the appropriate setup, DEV path, and files in place for them to display. For example, if you have a cobalt-scss.json file in the root of your DEV path then you should see a SASS badge at the top-right of the editor like so...

iide-sass-badge.png

And since Instant IDE can also be setup to work with NodeJS, NPM, and Gulp, you may see those badges as well. Note that for those badges to display you'd need a package.json and gulpfile.js file in the root of your DEV path.

How The Cobalt JSON Config Files Work

By default the cobalt-scss.json file looks like this:

{
    "Primary Styles" : {
        "Import Path": "/scss/",
        "Formatter": "Expanded",
        "PreCSS File Path": "/scss/style.scss",
        "CSS File Path": "/style.css",
        "PreCSS Images Path": "/scss/images/",
        "CSS Images Path": "/images/",
        "Images Sync Type": "update"
    }
}

A few things to note about this file and its included code before we walk through the values. First, note that this is only one group of values that represent one .scss file, and you can duplicate this over and over for each .scss file your Child Theme includes. Of course your .scss files may @import numerous other .scss files that do not require their own group of values here, but let's say you have an admin editor stylesheet that you want to compile, separate from this primary stylesheet. In that case your code might look like this:

{
    "Primary Styles" : {
        "Import Path": "/scss/",
        "Formatter": "Expanded",
        "PreCSS File Path": "/scss/style.scss",
        "CSS File Path": "/style.css",
        "PreCSS Images Path": "/scss/images/",
        "CSS Images Path": "/images/",
        "Images Sync Type": "update"
    },
    "Editor Styles" : {
        "Import Path": "/scss/admin/",
        "Formatter": "Expanded",
        "PreCSS File Path": "/scss/admin/editor.scss",
        "CSS File Path": "/admin/editor.css",
        "PreCSS Images Path": "/scss/admin/images/",
        "CSS Images Path": "/admin/images/",
        "Images Sync Type": "update"
    }
}

Before moving on with the details let me point out common coding mistakes with JSON arrays like this. The main issue I find has to do with the mighty comma. It's either missing or shouldn't be there. Note that in the above example you have two sets of values in two groups. Notice that the very last value should NOT have a comma. This includes right after the "update" value in both groups, as well as the closing bracket of the "Editor Styles" group. So if you add a comma where it's not supposed to be or leave one off where it should go, you will find that your config file will not work.

Let's run down the various values:

  • Primary Styles: This is the title of this particular group of values. It can be anything like as long as it does not match that of another group (if more than one is present).

  • Import Path: This is the relative path to your "partials" directory (or whatever name you've given the folder that you include all of those .scss files that you @import into your main stylesheet.) So, for example, the style.scss file in this example might import a variables SASS file like so:

@import "partials/variables";

That relative path to your variables SASS file is dependent on that "Import Path" config value.

  • Formatter: This value determines how your .scss code will be compiled into .css code. There are three possible values for .scss files: Expanded produces a CSS format that is pretty standard and the most readable. Nested produces a CSS format that maintains the basic nested look of the .scss code. And Compressed is what you'd use if you want to essentially minify your .css code. You can get a visual example of these formatting options on the SCSS PHP Docs page HERE.

A note about the Formatter value when using LESS files: Instead of three values, there are essentially these two: lessjs and compressed. lessjs is basically the same as Expanded above, and compressed is just like Compressed above.

  • PreCSS File Path: This is the relative path to your .scss file that you want to compile.

  • CSS File Path: This is the relative path to the .css file that will be created/updated by SASS.

  • PreCSS Images Path: This is the relative path to your SASS Images directory that you want to use with your .scss file.

  • CSS Images Path: This is the relative path to your CSS Images directory that you want to use with your .css file.

  • Images Sync Type: This determines the way in which your SASS images will sync up with your CSS images. Let's say that you add a background image in your .scss file and use a relative path point to that image file. This is fine for the .scss file, but once it compiles to the .css file that relative path will no longer work because the relative path to that image file will have changed (unless your .scss files is in the same directory as your .css file, but in our case that's not how we've setup our style files). So with this feature you can set it up so that your SCSS Images are either updated or even fully synced up with your CSS Images.

There are three possible values here: update, which updates images from the SASS images folder to the CSS images folder, sync, which essentially clones the SASS images folder over to the CSS images folder, and none, which is basically how you turn this feature off.

A note about the "update" value: This won't completely override your CSS images directory like the sync value will, but instead it just updates the changes you make with your SASS images over to your CSS images. The problem that some may have with this is that this means that when you change the name of an image it updates that image to the CSS images directory without deleting the image with the old name. So now you have two of the same images, just with different names, in your CSS images directory. This kind of thing could be an issue for some.

A Note about the "sync" value: This value is probably the most ideal for serious development since you'll likely do most of your customizations inside your /scss/ directory, including that of adding/deleting/editing images. So if you simply want your CSS images directory to identically match that of your SASS images directory, then this is the value to use.

A final note regarding this Images feature: This is currently only supported by Instant IDE. Since Themer Pro does not provide a way to manipulate any other images than that of the main CSS images directory, it didn't make sense to me to include this functionality in its code base. At this point if a Cobalt SASS or LESS config file includes these images values Themer Pro will simply ignore them. But Instant IDE, on the other hand, will take full advantage of the values provided in that JSON file.

See this in action here:

Youtube Video