SASS(SCSS)

オープンソースの統合開発環境Eclipse上で、CSSの拡張メタ言語(プリプロセッサー)であるSASSのSCSSで記述し、CSSファイルを生成できるようにします。

SCSSからCSSへのコンパイルに使用するSASSはRubyで動作しますので、事前にRuby for Windowsをインストールしておきます。

Windowsの『スタートメニュー』からRubyの『Command Prompt』を起動します。

Rubyのコマンドプロンプトから『gem install sass』でSASSをインストールします。

Eclipseでscssファイルを保存すると自動でコンパイルするようにします。

PowerShellのスクリプトファイルをパソコン上の任意の場所に作成します。
例として、D:¥Tools¥EclipseにScssToCss.ps1というファイル名で作成します。

# scssファイルのみ処理対象にします
$ArgFile = $Args[0]
if ((Get-ChildItem $ArgFile).Extension -ne ".scss") { exit }

# cssファイルの保存先を取得します
# 保存先をscssファイルの存在するフォルダーのひとつ上にしています
$CssFile = (Split-Path (Split-Path $ArgFile -Parent) -Parent) + "\" +
           (Get-ChildItem $ArgFile).BaseName + ".css" 

# Rubyのbinフォルダーを取得します
ruby -e "require 'rbconfig'; p RbConfig.ruby" | Set-Variable RubyPath
$RubyPath = (Split-Path $RubyPath.Trim('"') -Parent) + "\"
# " (この行はコードのSyntaxHighlightを戻すためのダミー行です。削除してください)

# scssファイルをコンパイルします
Write-Host ("Compiling ... " + $ArgFile) 
ruby.exe ($RubyPath + "scss") --style expanded --sourcemap=none $ArgFile $CssFile

自動コンパイルするEclipseのプロジェクトでビルダーを作成します。

プロジェクトのプロパティーから『ビルダー』の『新規』で新規ビルダーを作成します。

構成タイプは『プログラム』になります。

『OK』で作成するビルダーを編集します。

メインタブ

ビルダーの名前(例では『SCSStoCSS』)、ロケーションおよび引数を指定します。

ロケーションは実行するプログラム(Windows PowerShell)です。
C:¥Windows¥System32¥WindowsPowerShell¥v1.0¥powershell.exe

引数は作成したPowerShellのスクリプトファイルとビルダーが検出したリソースファイルの絶対パス変数です。
D:¥Tools¥Eclipse¥ScssToCss.ps1 ${resource_loc}

リフレッシュタブ

作成されたcssファイルがプロジェクトに表示されるようにコンパイル完了後にリフレッシュします。

ビルド・オプションタブ

ビルダーを自動実行するため『自動ビルド中(U)』にチェックします。

『OK』で編集を終了します。

『適用して閉じる』でビルダーを有効にします。