EclipseでSass+Compassを試してみました

参考にしたページ

• Sass＋compassをEclipse環境にインストール | code up
• D drive! : EclipseでSassを使ってみる

上のサイトを参考にすればEclipseでSassを試すことはできますが
私がしたこともメモ程度に。

まず、EclipseでSassを使うにあたって Ant が必要です。
私の環境には Ant が入ってなかったのでまずインストールをしました。
Ant のインストールというか J2EE をインストールすることでOK。

また予め Sass と Compass をインストールしておいてください。

まず、新規にPHPプロジェクトを作成したあとプロジェクト直下に build.xml を作成します。

この build.xml を Ant ビルドすることで Sass をコンパイルするように設定します。
中身は以下

<?xml version="1.0" encoding="utf-8" ?>
<project name="test_sass" default="all" basedir=".">

    <property name="ruby.bin" value="/usr/bin" />

    <target name="all" depends="init,compass" />

    <condition property="done.setup">
        <available file="./assets/config.rb" />
    </condition>

    <target name="init" unless="done.setup">
        <mkdir dir="assets" />
        <exec executable="${ruby.bin}/ruby" dir="assets">
            <arg value="${ruby.bin}/compass" />
            <arg value="create" />
            <arg value="--sass-dir" />
            <arg value="sass" />
            <arg value="--css-dir" />
            <arg value="css" />
        </exec>
    </target>

    <target name="compass">
        <exec executable="${ruby.bin}/ruby" dir="assets">
            <arg value="${ruby.bin}/compass" />
            <arg value="compile" />
            <arg value="-s" />
            <arg value="expanded" />
        </exec>
    </target>

</project>

init で assets フォルダを作成してその中に compass のプロジェクトを生成します。
その後、compass を実行してコンパイルをするというかんじです。

init は初回だけなんでコマンドから実行してもいいでせっかくなんで Ant から実行します。

これで生成された assets/sass に適当にファイルを作成して build.xml をAntビルド とすると assets/css にファイルが生成されます。

毎回、Antビルドするのが面倒だという方はAntビルダーの設定をしておけば便利かなと思います。

プロジェクトを右クリップ > プロパティ > 新規 > Antビルダー で画面を開きます。

メインタブでビルドファイルと基底ディレクトリを選択します。

リフレッシュタブでAntビルド後、各リソースを更新するように設定します。

ターゲットタブで自動ビルドにあるターゲットの設定で実行するターゲットを選択します。

これでOK。
ただし、こうするとSassファイルに関係なく保存されたときに勝手にAntビルドが走ります。
なんか回避方法があるのかな。。。