1

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)?

enter image description here

NOTE: SASS is correctly installed and configured in NetBeans

TylerH
  • 20,799
  • 66
  • 75
  • 101
MikO
  • 18,243
  • 12
  • 77
  • 109

1 Answers1

9

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:

Add compiler options to this field

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

I hope this helps.

Shannon Hochkins
  • 11,763
  • 15
  • 62
  • 95
  • Ok, so let's say that the *file1.scss* in my project is used to import all the other .scss files as you say... Anyway, what should I put in the project properties (see the image in my question)? – MikO Feb 20 '14 at 23:41
  • @MikO, I have edited my answer for you, and confirmed that this is where you should put these flags. – Shannon Hochkins Feb 21 '14 at 00:07
  • Thanks Shannon, but apart from the compressing stuff, I need to know what to put in the other fields (input and output in the image) taking into account the structure of the project... – MikO Feb 21 '14 at 00:31
  • 1
    That would be your folders where you keep everything, in your case, your input would be `/scss/` and your output would be `/public_html/css/` assuming that in NetBeans the / starts from the web root. – Shannon Hochkins Feb 21 '14 at 00:42
  • That cannot work (note that scss folder is not under the web root folder), and I tried with /../scss and it's not working either... – MikO Feb 21 '14 at 00:50
  • According to your diagram in your question, scss is directly under myproject which you've labeled as 'web root'? have you tried just `scss/` without the first slash? – Shannon Hochkins Feb 21 '14 at 00:52
  • Have you tried what the text in the box suggests? `${web.root}/scss` – Shannon Hochkins Feb 21 '14 at 01:02
  • No, *myproject* is the project root folder, *public_html* is the web root (called site root in NetBeans), and yes I tried with ${web.root}. Maybe it's just impossible to input files outisde the web root... – MikO Feb 21 '14 at 01:12
  • Do you mind me asking why you just don't include your project in the web root where it expects it? – Shannon Hochkins Feb 21 '14 at 01:15
  • Because sass files do not need to be in the web root folder, and in fact in my opinion they should not be in the web root. Only the final CSS file with all the styling should be in the web root... – MikO Feb 21 '14 at 01:18
  • Can you use something else to preprocess the scss files? I use prepros and it's great. You just drag and drop a directory and tell it where to output the files by browsing the file system. – Shannon Hochkins Feb 21 '14 at 01:26
  • And you've also tried `${web.root}../scss/` in the input field? – Shannon Hochkins Feb 21 '14 at 01:37
  • Is there a way to automaticly compile the same SCSS code into two different CSS files that use respectively `--style compact` and `--style expanded`? For example, I want my file `assets/scss/colors.scss` to be compiled to both `assets/css/expanded/colors.css` and `assets/css/minified/colors.min.css`. I'm looking for this feature, because I'm working on a new version of Cascade Framework (http://www.cascade-framework.com/) and I want people who don't use Sass to use the expanded CSS files for development and people who do use Sass to use the SCSS files for development. – John Slegers Mar 27 '14 at 09:38
  • Not that I know of @JohnSlegers – Shannon Hochkins Mar 30 '14 at 21:48
  • @Shannon: Doesn't this just watch the folder for changed files? I am trying with LESS, and I'm doing it the way Shannon is doing it, Netbeans doesn't know to compile only my file of import statements, it tries to compile the individual changed file to css only. – Edward Hew Feb 01 '15 at 10:45
  • I'm not following your issue @EdwardHew, NetBeans will always process any file with an extension .scss and treat it as a separate file, if you want to have one main source and import them like I have in my example, you'll need to prefix each file with _, example _site.scss will not create a file _site.css, instead, you'll need to import _site.scss into your main scss file. – Shannon Hochkins Feb 01 '15 at 23:46
  • @shannon Ah I see, it works, never mind the underscore though, for LESS maybe _ isn't needed. My reaction was because the console in Netbeans will throw errors, it says the variables I defined in another file doesn't exist as I save a file. I still get those errors but compilation works, and that is what counts. Thanks for your reply, this made life easier. – Edward Hew Feb 02 '15 at 00:52