Sublime TextでCompassを快適に使う（Windows）
IE6や7や8のシェアが少なくなり、ウェブサイトも表現の多様化が求められています。
CSS3を使ったインタラクティブな表現はもはや当たり前であり、サイト制作の比重もHTMLコーディングからCSS・javascriptへと大きくシフトしています。
javascriptはjQueryの登場により随分と手軽になりましたが、CSSだけは書式も機能も変わらず、記述量だけが何十倍にも増えました。
そこで登場したのがCSSメタ言語です。
CSSメタ言語とは、CSSを拡張した言語で、セレクタを入れ子にできたり、四則演算が出来たり、変数が使えたり、関数が使えたりします。
この上なく強力で便利で実用的です。
CSSメタ言語の候補には、主にSCSS・SASS・LESS・Stylusなどがありますが、日本を含め世界的に受け入れられているのがSCSS（サス）になります。
SCSSは今や上級のWEB製作者のみならず、基礎として覚えるべき業界のデファクトスタンダードとなりつつあります。
以下では現代のWEB製作者の最もポピュラーな制作環境である、
Sublime Text + Compass
による開発環境構築までの手順を紹介します。
Sublime Textのインストール
Sublime Text3のインストールと日本語パッケージの導入まで
Rubyのインストール
Windows上でCompassを使うためにはRubyのインストールが必要です。
「Ruby 2.0.0-p481 (x64)」をクリックしてダウンロードしてインストールしてください。
Compassのインストール
コマンドプロンプトを開き、
gem install compass
でCompassがインストールされます。
Compassを使ってみる
コマンドプロンプトで適当なプロジェクトのCSSディレクトリに移動します。
cd \xampp\htdocs\project\css
Compassの初期パッケージをcreateします。
compass create
いくつかのファイルとフォルダが生成されましたね。
さらにscssを自動でcssにコンパイルするため、以下のコマンドを実行します。
compass w
これで、上記ディレクトリ以下でscssが保存される度、自動でcssにコンパイルされるようになりました。
試しに[scss]フォルダに以下の内容でscssを作ってみましょう。
[style.scss]
$color:#fff;
div {
color:$color;
img {
border:none;
width:100px + 100px;
}
}
上記のstyle.scssをエディタで保存してください。
すると、[stylesheets]フォルダに以下の内容のstyle.cssファイルが保存されているはずです。
div {
color:white;
}
div img {
border:none;
width:200px;
}
（多少コメントの違いなど有ります）
これでscssを使う環境が整いました。
Sublime TextでCompassを快適に使うために
必要なパッケージ
以下のパッケージをインストールしてください。
- SCSS（カラーリング）
- SCSS Snipets（スニペット）
- Compass（ビルドに必要）
ビルドコマンドの修正
SublimeTextでscssを開き、ctrl+bでビルドが行われる状態になりましたが、watchになっていないので保存しても自動でビルドされません。
一々ctrl+bをするのは面倒なので、いちどctrl+bしたら自動でwatchされるようにコマンドファイルを修正します。
SublimeTextのPreferencesからPackageフォルダを開きます。
Compass->build.cmdを開きます。
:build
if not defined fileDir (
echo [ERROR] config.rb not found.
) else (
compass build '%fileDir%' --boring
)
を、
:build
if not defined fileDir (
echo [ERROR] config.rb not found.
) else (
compass watch '%fileDir%' --boring
)
に修正します。buildからwatchに変更しました。
これでctrl+bするだけで、自動でwatchされるようになりました。
（SublimeTextが開いている間だけ）
最近のコメント