To start you will need to download the Ruby installer for windows from here: http://rubyinstaller.org/downloads

Follow the prompts to install ruby, set your installation path to one you will remember, and tick the box to “Add Ruby executables to your PATH”

1-ruby-installer-paths

Launch a new command prompt window (Click start, type CMD & press enter). Navigate to your Ruby’s bin folder using cd \Ruby\bin (Hit Enter)

Install SASS using the command gem install sass (Hit Enter)2-cmd-gem-install-sass

If at this stage you receive the following error:

You will need to update your gems version using the method found here (latest release at time of writing: 2.6.7)

Otherwise your SASS install will complete3-cmd-gem-install-sass-installed

Now you can close the Command Prompt window and go to NetBeans

From the top menu, go to Tools > Options, then select the HTML/JS tab followed by the CSS Preprocessors tab

In the Sass Path field, point to the sass.bat file in your Ruby’s bin directory, then click OK

With an existing project, or a new one, Right-Click your project name in the NetBeans project browser and select Properties.

From the Project Properties pop-up window select CSS Preprocessors. Tick the “Compile Sass Files on Save” box. Setup watch directories as you require.

5-netbeans-project-properties

Options may vary depending on project type

If you wish for your output CSS to be minified, enter --style compressed in the Compiler Options box.

Create your watch folders as you entered above into your projects structure.

Now as soon as you create a new .scss file in your Input directory or save changes to one, NetBeans will automatically compile the file to .css in your Output directory!


0 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.