目次

SASS(SCSS)

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

Ruby for Windowsのインストール

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

SASSのインストール

windows:windows-ruby-cmd.png
Windowsの『スタートメニュー』からRubyの『Command Prompt』を起動します。

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

自動コンパイル

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

スクリプトファイルの作成

PowerShellのスクリプトファイルをパソコン上の任意の場所に作成します。
例として、D:¥Tools¥EclipseScssToCss.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のプロジェクトでビルダーを作成します。

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

eclipse:eclipse-builder0102.png
構成タイプは『プログラム』になります。

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

eclipse:eclipse-sass0201.png

メインタブ

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

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

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

eclipse:eclipse-sass0202.png

リフレッシュタブ

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

eclipse:eclipse-sass0203.png

ビルド・オプションタブ

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

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

eclipse:eclipse-sass0204.png
適用して閉じる』でビルダーを有効にします。