Rubyのインストール

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

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

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

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

Sassのインストール

gem install sass

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

Compassのインストール

gem install compass

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

Mac OSにSassとCompassをインストールする場合

Mac OSの場合、ターミナルでコマンドを打ち Sass と Compass をインストールしましょう。

sudo gem install sass

sudo gem install compass

Building native extensions.  This could take a while...
ERROR:  Error installing compass:
    ERROR: Failed to build gem native extension.

    current directory: /Library/Ruby/Gems/2.0.0/gems/ffi-1.9.18/ext/ffi_c
/System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/ruby -r ./siteconf20170510-3673-vo1d1e.rb extconf.rb
mkmf.rb can't find header files for ruby at /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/include/ruby.h

extconf failed, exit code 1

Gem files will remain installed in /Library/Ruby/Gems/2.0.0/gems/ffi-1.9.18 for inspection.
Results logged to /Library/Ruby/Gems/2.0.0/extensions/universal-darwin-16/2.0.0/ffi-1.9.18/gem_make.out

このようなエラーが出たので、以下のコマンドを打って　Command Line Developer Toolsをインストールしてから Compass をインストールしました。

xcode-select --install

sudo xcodebuild -license

それでもうまくいかない場合、パスを指定。

sudo gem install compass --with-opt-dir /usr/local/bin

NetBeansの設定

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

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

コンパイラオプションは

--compass --style expanded

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

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

バージョン確認

RubyGems

gem -v

Sass

sass -v

Compass

compass -v

アップデート

RubyGems

gem update --system

Sass

gem update sass

Compass

gem update compass

node-sassを使う場合

ちなみに今回 Ruby をインストールして Sass をインストールしましたが、 Node.js の node-sass を使用する方法もあります。こっちのほうがおススメ。
その場合は、Rubyのインストールは不要で、Node.js をインストールして

npm install node-sass -g

でインストールします。

NetBeansメニューの [ツール] → [オプション] を開き、[HTML5/JS] の [CSSプリプロセッサ]タブ のSassパスに C:\Users\ユーザ名\AppData\Roaming\npm\node-sass.cmd を設定します。

コンパイラオプションには

--output-style expanded

と指定しました。
通常の Sass とは指定するオプションが違うことに注意してください。

グローバルインストールをしたくない

コマンドプロンプトでプロジェクトフォルダなどに cd コマンドで移動します。

npm init

上記コマンドで package.json を生成します。

npm install node-sass --save-dev

package.json に記録したいとき。

NetBeansメニューの [ツール] → [オプション] を開き、[HTML5/JS] の [CSSプリプロセッサ]タブ のSassパスに

プロジェクトフォルダ\node_modules\.bin\node-sass.cmd

を設定します。