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インストール

「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が開いている間だけ)

Compassやscssに関するリファレンス

あわせて読みたい

コメントを残す