NetBeansでSassを使う環境を作る

NetBeans のプロジェクトで Sass を使用する方法です。

Ruby と Sass と Compass をインストールしました。

  

Rubyのインストール

RubyInstaller for Windows のサイトより Rubyをインストールします。
Windows の64bitマシンにインストールするので rubyinstaller-2.3.3-x64.exe をインストールしました。

環境変数 PATH を設定する にチェックを入れておくと、コマンドを打つとき Ruby のフォルダに移動しなくてよいので楽です。

Program Files 配下にインストールすると、コマンドプロンプトを管理者権限で実行しないと Sass をインストールするときにエラーになる場合がありました。

Sassのインストール

gem install sass

コマンドプロンプトを起動し、上記のコマンドを打ち Sass をインストールします。
(パッケージングシステム RubyGems のコマンドを使う。)

Compassのインストール

gem install compass

Sass のフレーワークである Compass もインストールしておきます。


Ruby をインストールしたフォルダの C:\Ruby\bin に Sass や Compass の実行ファイルが生成されています。

NetBeansの設定


NetBeansメニューの [ツール] → [オプション] を開き、[HTML5/JS] の [CSSプリプロセッサ]タブ のSassパスを設定します。
C:\Ruby\bin\sass.bat を設定しました。

NetBeans のバージョンは 8.1 です。


プロジェクトのプロパティを開きます。
CSSプリプロセッサの項目で Sass のフォルダと CSS のフォルダを設定しましょう。

コンパイラオプションは

--compass --style expanded

と設定しています。
Compass を使用するのと、出力するCSSのフォーマットを指定しています。
この辺りはお好みで変更してください。


Fuel PHP のプロジェクトに Sass の設定してみました。
public フォルダがWebルートになるので、入力は /assets/scss 出力は /assets/css としています。

ちなみに今回 Ruby をインストールして Sass をインストールしましたが、 Node.js の node-sass を使用する方法もあるようです。

バージョン確認

RubyGems

gem -v

Sass

sass -v

Compass

compass -v

アップデート

RubyGems

gem update --system

Sass

gem update sass

Compass

gem update compass
  

共有やブックマークなど