ダメプログラマの技術メモ

プログラミングの技術メモや駄文など

Sass/CompassをEclipseから利用する

Eclipse Sass Compass

外部ツールなど使わずに普段利用しているEclipse上でSass/Compassの作業を完結させたかったので、導入からEclipseでCompassのコンパイルを行うまでの手順をメモしました。

Rubyのダウンロード

SassもCompassもRubyで書かれているためRubyのインストールが必須になります。

ダウンロードサイト
http://rubyinstaller.org/downloads/

RubyInstallersにあるリンクから環境にあわせて最新のRubyをダウンロードします。

※ 2016.01.18時点ではバージョン2.2.3が最新

Rubyのインストール

rubyinstaller-2.2.3-x64.exe（あるいはrubyinstaller-2.2.3.exe）を実行します。

  • セットアップに使用する言語の選択
    • 「日本語」を選択する。
    • 「OK」ボタンを押下する。
  • Ruby 2.2.3-p173 セットアップ（使用許諾契約書の同意）
    • 「同意する」を選択する。
    • 「次へ」ボタンを押下する。
  • Ruby 2.2.3-p173 セットアップ（インストール先とオプションの指定）
    • 「Rubyの実行ファイルへ環境変数PATHを設定する」にチェックを付ける。
    • 「インストール」ボタンを押下する。
  • Ruby 2.2.3-p173 セットアップ（セットアップウィザードの完了）
    • 「完了」ボタンを押下する。

Sass、Compassのインストール

コマンドプロンプトを起動して次のコマンドを実行します。

> gem update --system
> gem install sass
> gem install compass

# バージョンが表示されることを確認する
> compass -v

Eclipseの設定

EclipseからCompassを実行するためにAntを利用します。

私の使用しているEclipseは「Pleiades All in One 4.4.2」の「PHP 64bit Standard Edition」なのですが、build.xmlを作成してもAntビルドの項目が出てこなかったのでソフトウェア（Java EE開発ツール）を追加でインストールしました。

もしEclipseにJavaEEの開発環境が既に組み込まれている場合は次の設定は不要です。

Java EE開発ツールのインストール

  • Eclipse
    • 「ヘルプ」メニュー　→　「新規ソフトウェアのインストール...」
  • 使用可能なソフトウェア画面
  • インストール詳細画面
    • 「次へ」ボタンを押下する。
  • ライセンスのレビュー画面
    • 「使用条件の条項に同意します」を選択する。
    • 「完了」ボタンを押下する。
    • 「ソフトウェア更新」ダイアログが表示されたら「はい」ボタンを押下する。

動作確認

次のようなファイル群を作成してstyle.scssからstyle.cssが作成できることを確認します。
cssフォルダ以下はCompassのコンパイル時に自動生成されるので存在しなくても問題ありません。

test
├── build.xml
├── config.rb
├── css            #コンパイル時に生成される
│   └── style.css
└── scss
    └── style.scss

新規プロジェクトの作成

Eclipseから「test」という名前で新規プロジェクトを作成します。
プロジェクトの種類はなんでも構いません。

config.rbの作成

config.rbはCompassの設定ファイルです。
testフォルダの下に次の内容でファイルを作成します。

http_path = "/"
sass_dir = "scss"
css_dir = "css"
cache = false

build.xmlの作成

build.xmlにCompassでコンパイルを行う設定を記述します。
testフォルダの下に次の内容でファイルを作成します。

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

	<!-- Rubyのインストールフォルダ(binフォルダ）を指定する -->
	<property name="ruby.bin" value="C:\Ruby22-x64\bin" />

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

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

</project>

Sassファイルの作成

テスト用にstyle.scssを作成します。
test/scssフォルダの下に次の内容でファイルを作成します。

@import "compass";
#hoge {
    @include border-radius(10px);
}

antの実行

Eclipse上でbuild.xmlを右クリック→「実行」→「Antビルド」

次の内容のcss/style.cssが作成されていればOKです（´(ｪ)｀）b

/* line 2, ../scss/style.scss */
#hoge {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}