【NetBeans】Sassを使う

2013/12/19

NetBeans7.3まではプラグインを用いてSassをコンパイルしていましたが、NetBeans7.4からは標準できるようになりました。コード保存時に自動でコンパイルが走るので大変便利です。

環境

Windows: 10
NetBeans: 8.2

Ruby インストール

RubyInstallerから最新バージョンを選択してインストールします。今回はRuby 2.4.1-2 (x64)を選択しました。インストール時にRubyの実行ファイルへの環境変数PATHを設定するを選択してPATHを通しておきます。

インストール後、コマンドプロンプトを起動してバージョンを確認してみます。

$ ruby -v
ruby 2.4.1p111 (2017-03-22 revision 58053) [x64-mingw32]

Sass インストール

$ gem install sass

アップデート

RubyとSassのインストールが終わりました。今後、バージョンアップをする場合は下記のコマンドとなります。

$ gem update --system # gem本体のアップデート
$ gem update          # インストール済みの全パッケージを更新
$ gem update sass     # 指定アップデード

RubyのアップデートはRubyInstallerから最新バージョンをダウンロードし、インストーラーを実行すれば簡単にできます。

NetBeans インストール・設定

NetBeansから最新バージョンをダウンロードし、指示通りにインストールします。

起動後、上部のツールバーから「ツール → オプション → HTML/JS → CSSプリプロセッサ」の順に選択し、設定画面を表示します。先にSassをインストールしていたので、Sassパス(S):にC:¥Ruby24-x64¥bin¥scss.batが設定されています。空白の場合は参照からscss.batを選択します。

コンパイル設定

左サイドバーからプロジェクト名を右クリック、オプションからCSSプリプロセッサを選択し、Sassの設定をします。

ウォッチ：に使用するディレクトリを入力します。名の通り、--watchオプションです。
入力にはxx.scss / xx.sassがあるフォルダを、出力にはxx.cssの出力フォルダを入力します。

今回、コンパイル・オプションは以下のようにしました。

--style compressed --unix-newlines -E UTF-8

文字コード設定

初期状態ではNetBeansの文字コードがUTF-8では無いのでUTF-8にします。
NetBeansのインストールディレクリからetc/netbeans.confを管理者として実行で開きnetbeans_default_optionsに-J-Dfile.encoding=UTF-8を追加します。

netbeans_default_options="-J-client -J-Xss2m -J-Xms32m -J-Dapple.laf.useScreenMenuBar=true -J-Dapple.awt.graphics.UseQuartz=true -J-Dsun.java2d.noddraw=true -J-Dsun.java2d.dpiaware=true -J-Dsun.zip.disableMemoryMapping=true -J-Dfile.encoding=UTF-8 -J-Dawt.useSystemAAFontSettings=on"

NetBeansの再起動で反映されます。
私の場合はフォントにRictyを使用しているので、-J-Dawt.useSystemAAFontSettings=onも追加しました。

まとめ

NetBeansでSassを使用するのに、Rubyからインストールしなければならないので避けていましたが、とても簡単にできました。なによりscssファイルで入力補完が使えて快適です。