NetBeans7.3+sass+compassの3つを使いたい場合の手順を、手探りながらまとめてみた。
調べた限り、かゆいところにびみょーに手が届かなかったので、まとめてみることにした。
※2014/1/7現在、NetBeans7.4では簡単にsassとcompassに対応させられるので、バージョンアップをお薦めします。

参考サイト:これからSassを始めたい人へ!導入手順をまとめてみた(Dreamweaver対応)
http://liginc.co.jp/web/html-css/css/56599

1.rubyのダウンロードとインストール

とりあえずrubyをダウンロードする。
ダウンロードは下記URLのダウンロードボタンから。

http://rubyinstaller.org/

ダウンロードしたものを実行するとインストーラーが走るので、画面の指示に従ってインストールする。

2.sassとcompassのインストール

rubyのインストールが終わったら、sassとcompassのインストール。
サイトからダウンロードしなくても、rubyのコマンドを使えば簡単にダウンロード+インストールできる。

  1. コマンドプロンプト(スタートボタン>すべてのプログラム>アクセサリ>コマンドプロンプト)を起動する
  2. コンソール画面で「gem install sass」と入力してEnterキーを押す。
  3. コンソール画面で「gem install compass」と入力してEnterキーを押す。

これだけ。実に簡単である。

3.NetBeans用のscss-editorのダウンロード

※本手順はNetBeans7.4では実施不要。
NetBeans用のscss-editorをダウンロードしてくる。URLは↓。
画面上部のdownloadをクリックし、 org-netbeans-modules-languages-scss-1.1.2.nbm をダウンロードしてきた。
※なぜか~1.1.3.nbmだとうまくインストールができなかったので今回は1.1.2を使用。

http://code.google.com/p/scss-editor/

4.scss-editorのインストール

※本手順はNetBeans7.4では実施不要。
ダウンロードしてきたファイルを、NetBeansにインストールする。手順は以下のとおり。

  1. NetBeansを起動して、メニューから「ツール」>「プラグイン」を選択
  2. ダウンロード済みタブを選択、「プラグインの追加」ボタンを押す
  3. ダウンロードしてきた~1.1.2.nbmファイルを選択
  4. インストールのところにscss-editorの情報が表示されるので、画面の指示に従ってインストールを行う

5.NetBeansの設定変更

※本手順はNetBeans7.4では記事最後の画像の通り。
インストールした各種ファイルを使うように、NetBeansの設定を変更する

  1. NetBeansのメニューから「ツール」>「オプション」を選択
  2. 「その他」>「Scss」を選択
  3. Runtimeは「External Sass runtime」を選択
  4. 「Browse」で、sassのインストール場所を指定する。
    ※ 自分の場合はC:\Ruby200\lib\ruby\gems\2.0.0\gems\sass-3.2.12 でした。インストール先を調べるには、コマンドプロンプトで「gem which sass」と入力すると表示されます。
  5. optionsの「Complie on save」をチェックして「OK」を押す

6.scssファイルを作成

ここまでできたら準備完了。あとは実際にscss形式で書くなりcssをコンバートするなり・・・なんだけど、ここで詰んだ。
scss形式で記載するのはまったく問題ないが、compassフレームワークが使えない。
解説サイトでは @import “compass” と書けば完璧オッケー!とあるが、ファイルがないよバカ!とエラーが出てしまう。
で、いろいろいじったけども原因がわからず(というか何となくわかってはいるけどもスマートな対応方法がないということで無視)、結局scssフォルダにcompassのscssファイルをぶち込むことで無理やり解決することにした。

compassのscssファイルは自分の場合は下記フォルダから「_compass.scss」、「compass」フォルダをまとめてコピー。
\ruby~\compass-x.xx.x\ はcompassのインストールフォルダ。コマンドプロンプトで「gem which compass」と入力すると以下略

\Ruby200\lib\ruby\gems\2.0.0\gems\compass-0.12.2\frameworks\compass\stylesheets

ださい、ださすぎる・・・

ともあれ、これでダサかろうがなんだろうが、scss+compassの一部のmixinだけ)が使えるようになった。最低限、最低限・・・

compassにはいろいろと便利な機能があって、それらを使えるようにするには、普通にコマンドプロンプトを立ち上げるなりGUI使うなりしなきゃいけないが、これはさすがに面倒ということでやらない。

2014/1/7 NetBeans7.4では、標準でSASSが組み込まれてる。

メニューの「ツール」→「オプション」を開き、「その他」、「CSSプリプロセッサ」を選択すると、下記のような画面が出てくるので適宜設定する。

sass_setting

その後、各プロジェクトのプロパティ画面を開き、SCSSファイルの格納先と自動コンパイル設定を設定するだけでSASSが利用可能になる。
また、コンパイルオプションに「--compass」を追加すると、compassフレームワークも参照可能となる。俺の苦労は何だったのかといわんばかりのバージョンアップである。

compasssetting

2013/10/31 17:42 compass連携のあたりを修正
2014/1/7 NetBeans7.4について追記