How to use SASS with Netbeans 8.0.1

Installing SASS on Windows10, Ruby2.2.3, Netbeans8

  1. Download SASS for Windows – RubyInstaller.org
  2. Install Ruby like:

Installing SASS in Netbeans

  1. Search windows for CMD (Command Prompt) and start it.
  2. Access Ruby’s bin folder using cd \Ruby\bin (Hit Enter)
  3. Install sass using the command gem install sass (Hit Enter to install)

Installing SASS in Netbeans

  1. Wait for the installation to finish

Installing SASS in Netbeans

  1. In Netbeans open
    Options → Tools → Miscellaneous (HTML/JS in v8.1+) → CSS Preprocessors tab
  2. Enter the path to the installed sass.bat C:\Ruby\bin\sass.bat than click Install Sass.
    Confirm your changes with Apply / OK

Installing SASS in Netbeans

  1. Use an existing one or Create a New Project (HTML5, PHP, whatever…).
    After the project is created open the Projects window.
    Right-Click your project and choose > Properties.
    From the Project Properties popup select CSS Preprocessors.
    Select the Compile SASS Files on Save.
    (If you want the compiler to automatically minimize your .css result file, use --style compressed under the Compiler Options)

Installing SASS in Netbeans

  1. You can see from the image above that the compiler uses two default Input(watchable)/Output(compiled destionation) folders paths.
    Create the scss folder (an optionally the css folder) in your project as well.

Installing SASS in Netbeans

You’re done!

As soon you create a new .scss file or you save it Netbeans will automatically compile the file to .css in the /css folder.

Installing SASS in Netbeans

Leave a Comment