NetBeansでSassを利用する

Tag:

NetBeansでsass、compassを利用する方法を紹介します。

基本知識
・SASSにはSASS記法と、SCSS記法があるが、SCSS記法が一般。
・拡張子は、「.scss」。
・SASSファイルをコンパイルしてCSSファイルにする。
・CompassはSassをより使いやすく、便利にしたもの。
Sassのインストール
Sassを利用するにはRubyが必要です。Rubyのインストールは下記ページで紹介しています。
開発環境 : WindowsにRubyをインストール | DN-Web64

Rubyをインストールするとgemコマンドを利用することができます。Sassをインストールするには、コマンドプロンプトで「gem install sass」と入力します。
sass_1

関連コマンド
操作 コマンド
バージョン確認
sass -v
アップデート ローカルパッケージ全体をアップデート

gem update --system

Sassのみアップデート

gem update sass
アンインストール
gem uninstall sass
compassのインストール
次のように入力し、compassをインストールします。

gem install compass

インストールされたか確認します。

compass -v

sass_3

NetBeansの設定

全体設定

NetBeansを起動し、[ツール] – [オプション]を選択します。
sass_4

[その他]にある[CSSプリプロセッサ]を選択し、Sassパスを設定して「OK」をクリックします。
sass_5

プロジェクトの設定

例として、SassTESTというプロジェクトでSassが動作するようにしてみます。

まず、scssフォルダを作成します。
sass_6

[プロパティ]をクリックして、プロパティウィンドウを表示させます。
sass_7

[CSSプリプロセッサ]の設定を行います。
sass_8
[保存時にSassファイルをコンパイル]にチェックをつけます。今回は、コンパイラオプションに「–compass –style compressed」と入力しました。入力が完了したら[OK]をクリックします。これで、SCSSファイルが更新(保存)される度に自動的にコンパイルされ、CSSファイルが出力されます。

動作確認

「scssフォルダ」配下に「test.scss」ファイルを作成して次のように記述します。

@import "compass";

.box {
    @include border-radius(5px);
}

上記のように記述して保存すると、cssフォルダ内に「test.css」ファイルが作成されます。
sass_9

「test.css」ファイルは次のようになっています。

.box{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
/*# sourceMappingURL=test.css.map */

無事にコンパイルされていることが確認できました。

※注意
パスに「日本語のフォルダ名」などが含まれているとコンパイルに失敗する可能性があります。

スポンサーリンク