How to use SASS with Netbeans 8.0.1

Question

I'm trying to use SASS in Netbeans 8.0.1. I have Ruby and SASS set up correctly based upon the feedback from ruby -v.

I have a web application set up with css and scss folders under ProjectWeb Pages esources.

My input and output are set to /scss and /css respectively and I have checked 'Compile Sass File on Save'. I have created a styles.scss file and added some SASS/CSS.

When I save the styles.scss file, is it supposed to generate a styles.css? Nothing happens when I save or compile the project.

Has anyone run into any similar problems or have suggestions on how to debug this problem?

Thanks in advance!

Answer 1

Installing SASS on Windows10, Ruby2.2.3, Netbeans8

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

3. Search windows for CMD (Command Prompt) and start it.
4. Access Ruby's bin folder using cd Rubyin (Hit Enter)
5. Install sass using the command gem install sass (Hit Enter to install)

6. Wait for the installation to finish

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

9. 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)

10. 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.

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.