NetBeans7.3で、sass＋compassを使えるようにする

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

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

１．rubyのダウンロードとインストール

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

http://rubyinstaller.org/

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

２．sassとcompassのインストール

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

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

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

３．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/

４．scss-editorのインストール

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

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

５．NetBeansの設定変更

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

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

６．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プリプロセッサ」を選択すると、下記のような画面が出てくるので適宜設定する。

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