初めに

CSS を拡張したメタ言語に Sass があります。
Sass は CSS にない機能をサポートし CSS に変換することを目的とした言語で、最終的に CSS にコンパイルされます。

もともとは Ruby でオープンソースとして公開されており、Sass のフレームワークである Compass も有名でしたが、2015年から更新されていないこともあり、現在は Node.js 上で動作する node-sass が使用されたり、Compass の代替として、各ブラウザのベンダープレフィックスを付与する Autoprefixer が使用されていたりします。

Sass 以外の CSS拡張メタ言語は、Less や Styuls があります。
BEM という命名規則を用いて CSS設計をおこなう時に、継承周りが Stylus が使い勝手がよく、Stylus 移行派も現れています。
シェアは Sass がまだ多いと思いますが、最近だとロシアの Andrey Sitnik氏が開発している PostCSS への注目も集まっており、Autoprefixer も PostCSS の一部の機能です。

環境

• NetBeans IDE 8.1（HTML5/JavaScriptサポート）
• Node.js v6.10.2 & v6.11.1 推奨版（2017.07.14現在）
• node-sass 4.5.3
• Subversion
• TortoiseSVN

※Ruby版の Sass および Compass は、Ruby のインストールが必要なため、個人的に推奨しません。
それよりも Node.js の パッケージ（npm）をあわせて使うことが多いので、Node.js をインストールすれば動作する環境を目指す。

Node.js のインストール

Node.js のサイトより、推奨版のインストーラをダウンロードし、インストールをおこないます。

インストールが完了したらコマンドプロンプトを起動し、以下のコマンドを実行します。

node -v

バージョンが表示されれば、インストールが無事完了しています。

node -v
v6.11.1

package.json の作成（npm init）

NetBeans で作成しているプロジェクトのフォルダは以下に package.json を作成します。
NetBeans のファイルの新規作成で作成することも可能だが、今回はコマンドで作成します。

Node.js のパッケージは npm（Node Packaged Modules）コマンドを使用して管理します。

コマンドプロンプトを起動し、cdコマンドでプロジェクトのフォルダを指定し、プロジェクトのフォルダに移動します。

cd プロジェクトフォルダ

以下のコマンドで package.json を作成します。

npm init

入力を求められますが、Enter で進めてもいいです。-y オプションをつけると入力を省略できます。
外部公開し、配布する場合は、きちんと入力することが望ましいでしょう。

npm init -y

package.json

{
  "name": "sass-project",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "keywords": [],
  "description": ""
}

node-sass のインストール（npm install）

続けて node-sass をインストールします。グローバルインストールではなくローカルインストールをおこないます。
package.json ファイルに設定を保存するため、–save-dev オプションをつけます。

npm install node-sass --save-dev

package.json

{
  "name": "sass-project",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "keywords": [],
  "description": "",
  "devDependencies": {
    "node-sass": "^4.5.3"
  }
}

devDependencies の項目が追加されます。

また node_modules フォルダがプロジェクトフォルダ配下に作成されます。
基本的にパッケージのインストールはローカルインストールとし、package.json を元に、各自のコンピュータにインストールします。

NetBeans の設定

全般設定

NetBeans のメニューの [ツール] → [オプション] を選択。
HTML/JSの（その他の項目の場合もあり）CSSプリプロセッサのタブを選択。

Sassパスに node_modulesフォルダの .bin\node-sass.cmd を指定します。

プロジェクト設定

プロジェクトのプロパティを開き、CSSプリプロセッサの Sass の設定をおこないます。

[保存時にSassファイルをコンパイル]にチェックを入れると、[ウォッチ] → [入力]で指定したフォルダ内をの Sassファイルを監視し、保存時に[出力]で指定したフォルダに CSS ファイルを出力してくれます。

Fuel PHP などのプロジェクトは public フォルダが webroot になっているため、その配下のフォルダを指定しています。

├ assets/
　├ css/
　│　└ base.css
　├ scss/
　│　└ base.scss

また、コンパイラオプションには CSS出力のフォーマットを指定しています。

圧縮する

--output-style compressed

展開する

--output-style expanded

デフォルト

--output-style nested

Subversion の設定

node_modules フォルダは無視リストに設定し、コミットから除外します。

また、

• package.json
• NetBeans のプロジェクトのプロパティの CSSプリプロセッサの設定

これらをコミットしておけば、プロジェクトメンバーは Node.js をインストールし

npm install

コマンドを実行し、NetBeans の Sassパスを指定するだけで済みます。

最後に

今回の方法の注意点として、プロジェクトごとに Sass の実行ファイルを指定することができません。
（実行ファイルの指定はプロジェクト固有の設定ではなく、NetBeans 全体の設定になっている。）

また、今回は Sass の使用だけでしたが、npm の設定をおこない、package.json の scripts に npm scripts を記述したり、Grunt や Gulp などのタスクランナーを使用することで、複数のタスクを実行することが可能です。

タスクランナーは npm のパッケージを実行するために、さらに Grunt や Gulp のプラグインを経由して実行されるので、バージョンアップ時に互換性の問題に遭遇する場合がある、というデメリットも存在することは覚えておくといいでしょう。

Grunt や Gulp 離れの記事もありますが、WebPack などに依存しても似たような問題に遭遇する可能性はあるので、一概に使うのがダメだとは言えない。
ケースバイケースで npm script で書いてもよいのではないかと思う。
　
Sassファイルを wacth（監視）し、コンパイルするタスクを組み込めば NetBeans を起動したあとにそのタスクさえ実行してしまえば、Sassファイルの保存時にコンパイルが可能です。

package.json

"scripts": {
    "build": "node-sass ./scss --output ./css",
    "watch": "node-sass ./scss --output ./css --watch"
},

こうしておくと NetBeans 上からだけではなくコマンドで

npm run build

npm run watch

を実行すればコンパイルや監視が可能なので、NetBeans を使わない場合も実行でき、開発環境を選ばないというメリットがあります。