If you’re developing WordPress websites in NetBeans, there is a chance that you will edit CSS using the Sass approach. In other words, for every change you make in any of the Sass partials, you will surely want these changes compile into main style.css file automatically. NetBeans offers you this option. And the best of all, it’s very easy to set this up, but you may Google that many developers are having trouble doing it the right way.
I am assuming that you have NetBeans installed and WordPress project created. The steps are as follows:
Download the latest Ruby from http://rubyinstaller.org/downloads/ and install. When installing, make sure you thick the middle option:
The next step is to install Sass from command prompt – open command prompt and type the following:
|
1 |
gem install sass |
Upon successful installation, several new files appeared in your Ruby folder – one of them is sass.bat you will need.
Now open NetBeans, open Tools -> Options and point to Miscellaneous. This is where you will select your Sass processor. If you installed Ruby in default path, you will have something like this:
Restart NetBeans after that (some users reportedly had to do it, so just in case 🙂 ).
Completing these steps doesn’t mean that your Sass files will be processed – this is where most tutorials finish, forgetting the most important thing – setting the Sass file path! This is how you do it:
- Right click on the project name and click properties.
- Now, refer to the next image that will give you an idea on how to set input as output paths for Sass preprocessor. In my case, WordPress root directory is the projects’ root directory, hence the path I added.
And there you go – make a change in any of the partials or the main file, and providing there are no errors (undeclared variables, etc), Netbeans will compile main CSS file.