CSS pre-processors in NetBeans

Question

Let's say I have this HTML5 project on NetBeans 7.4

myproject <---project folder
  |
  |-- public_html <---web root (the only visible in Projects tab)
  |     |
  |     |-- css
  |           |-- style.css
  |
  |-- scss
        |-- file1.scss
        |-- file2.scss
        |-- more
              |-- file3.scss

I want to configure NetBeans in such way that, when I save any of file1.scss, file2.scss and file3.scss, it compiles all these files into style.css, preferably minified...

Is it possible? If so, what should I write in project properties (see image)?

NOTE: SASS is correctly installed and configured in NetBeans

Answer 1

I usually have a main.scss file, which I import all other css files which get preprocessed. This doesn't actually put everything in one file, but it allows you to only include just one file in the header.

/*  Import Media Queries and Print Styles */

@import "base.css";
@import "device.css";
@import "print.css";
@import "site.css";
@import "mq.css";
@import "grid.css";
@import "utils.css";

Then from my html head, I include the main.css file, which contains everything I need.

<!-- CSS -->
<link rel="stylesheet" href="css/main/main.css">

As for the minified preference, this is part of the preprocessors setup. Usually when setting this up from commandline, the watch command will have a style flag like so which minifies the css:

sass --watch style.scss:style.css --style compressed

In your image, there is a field called Compiler Options, this field should be used to add any flags to your preprocessor, example, in your case, you would add --style compressed to this field.

Example:

Use --style compressed for minified css output. Also available are --style compact & --style expanded.

I hope this helps.