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 をインストールするときにエラーになる場合がありました。


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 を設定しました。

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
  

共有やブックマークなど