CompassとSassの基礎の覚書（インストールとツール編）

Compassを使えたら便利だろうなぁと思うことが結構増えてきたので、年末に時間をつくって基礎を勉強してみました。僕のような初心者にはとっつきにくいところもあったので、備忘録として基礎をまとめてみました。

目次

1. そもそもCompassやSassってなに？
2. SassやCompassを使うメリットは？
3. CompassやSassを使うには？
4. コマンドラインツール
5. GUIツール
6. Compassのコマンドラインツールの基本的な使い方
7. Compassの設定ファイル（config.rb）について
8. まとめ
9. 参考

そもそもCompassやSassってなに？

SassはSyntactically Awesome StyleSheetの略で、CSSをプログラム言語のように拡張するものです。CSSでは使えない変数や関数のようなものを使えるようにするものです。SASSで書いたものは一度プロセス（コンパイル）してCSSに書き出す必要があります。プリプロセッサやCSSメタ言語、CSS拡張言語などと呼ばれています。CompassはSassをさらに拡張して、より便利に使うためのツールです。Compassのウェブサイトでは「CompassはCSS編集フレームワーク（CSS Authoring Framework）です」と書かれています。

• Compassのウェブサイト
• Sassのウェブサイト

参考までに、CSSメタ言語にはSassの他にもLessやStylusというのもあります。

• Lessのウェブサイト
• Stylusのウェブサイト

SassやCompassを使うメリットは？

個人的には、CSSを書いたら自動で圧縮してコンパイルしてくれる機能だけでも使うメリットがあると思います。さらに、開発環境では複数ファイルで管理しているCSSファイルを、本番サーバにアップする際はCSSファイルを1つに統合して圧縮して書き出すなんてことも簡単にできてしまいます。

また、変数や数値の計算がCSSファイル上でできてしまうのはすごく便利だと感じています。たとえば、グリッド・システムをIE6や7に対応させる場合、面倒な計算を沢山しなくてはならないんですが、変数と計算機能を使えば、よりシンプルに効率的にCSSを書けるようになります。ガッターサイズの調整も、変数を変えるだけで簡単に行えるようになります。

あと、SassやCompassの良い所は、使いたくない機能は使わなくても良いというところです。普通にCSSを書いて、.scssの拡張子で保存すれば、通常、コンパクト、圧縮などといった方法を選択してCSSに書き出せます。

ちょっと余談になりますが、SassやCompassをコンパイルするGUIツールのCodeKitやLiveReloadを使えば、CSSやHTMLファイルを編集するたびにブラウザを自動でリロードしてくれるのですごく便利です。

CompassやSassを使うには？

CompassやSassを使うには、ファイルをコンパイルするためのツールをインストールする必要があります。SassもCompassもコマンドラインで使うツールとして作られてものですが、便利なGUIのツールもたくさんあります。まずは、基本のコマンドラインツールのインストール方法をご紹介します。

コマンドラインツール

SassとCompassのインストールの方法（Mac）

SassとCompassはRuby上で動くプログラムです。Macの場合、Rubyはすでに入っているので、ターミナルから以下のようなコマンドを入力してインストール可能です。

Sassのインストール

sudo gem install sass

その他にも、gitからインストールする方法もあるようです
→ Sassウェブサイトのインストールの説明

※「sudo」は管理者権限を一時的に適用するために必要なコマンドです。環境によっては必要がない場合があります。

Compassのインストール

sudo gem install sass

以下のコマンドで、SassとCompassのバージョンの確認ができれば、問題なくインストールされています。

sass -v
compass -v

※css_parserをインストールしようとしたらエラーが出たので、ググったらgccが必要ということで、XcodeのPreference > DownloadsからCommand Line Toolsをインストールしたらcss_parserのインストールもできました。ちなみに、このcss_parserをインストールするとcompassのstatsコマンドで、CSSのサイズや要素数などの統計が見られるようになります。

（以下のサイトを参照： Failed to build gem native extension — Stack Overflow）

SassとCompassのインストールの方法（Win）

Windowsの場合、まずRubyをインストールする必要があります。RubyInstaller for Windowsをダウンロードしてインストールします。インストールの際、オプションの「Rubyの実行ファイルへ環境変数PATHを設定する」にチェックを入れるのを忘れずに。

※RubyはSassを使うだけなら最新版のもので良さそうです（参照: SassをWindowsにインストールする — あと味）。

あとは、コマンドプロンプトからSassとCompassをインストールします。

gem install sass
gem install compass

Macと同様に、バージョンの確認ができれば問題なくインストールが済んでいます。

sass -v
compass -v

GUIツール

Mac/Winで以下のようなGUIツールがあります。他にもいろいろなツールがこちらで紹介されてました。※GUIツールは便利ですが、どうしてもコマンドで使うのが嫌でなければ、コマンドで使うのが楽なようにも思い始めています。

CodeKit（Mac Only / 有料）

ファイルを更新すると自動でブラウザをリロードしてくれる機能など、他にもいろいろな便利機能がついているので、有料ですがMacだったらCodeKitでいいんじゃないかと思います。Lessなどにも対応しています。
→ CodeKit

LiveReload (Mac/Win版はAlpha / 有料)

CodeKitに似たツール。ブラウザのリロードにはブラウザにプラグインをインストールするか、ソースコードにスクリプトを埋め込む必要があるようです。Alpha版ですが、Win版もあるのが嬉しいですね。
→ LiveReload

SCOUT （Win/Mac / 無料）

Win7 64bitだったため、インストールに手こずりましたが、無料ですし、いいかもしれません。ちなみにAdobe AIR上で動くアプリですが、Javaのインストールが必要です（ちょっと面倒でした…）。
→ SCOUT

Compass.app （Win/Mac / 有料）

試してないですが、メニューバーから使うツールでWin/Mac/Linuxで使えるというのはメリットだと思います。Sublime Text 2みたいに、1つライセンスを買ったらWin/Macどちらでも使って良ければ良いんですが、FAQには書いてありませんでした。。。
→ Compass.app

Compassのコマンドラインツールの基本的な使い方

Compassの使い方がわかればSassは使えるようになると思うので、とりあえずCompassの使い方をまとめてみました。

コマンドのヘルプ

compass -h

指定の<ディレクトリ名＞内に新規Compassプロジェクトを作成

compass create <ディクトリ名>

指定の<ディレクトリ名＞内にオプションを設定して新規Compassプロジェクトを作成する場合

compass create <ディクトリ名> --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --images-dir "img"

どちらも、指定したディレクトリ内にscssやcssファイルが作成されます。また、これらの初期設定はディレクトリ内に作成されるconfig.rbを編集することで変更が可能です。ディレクトリ名を指定しない場合は、現在のディクレクトリに作成されます。

既存のプロジェクトにCompassプロジェクトを追加する

compass init <ディレクトリ名>

Sassファイルのコンパイル

compass compile

または

compass compile <プロジェクトのディレクトリ>

Sassファイルが変更されるたびにコンパイルする「watch」

compass watch

または

compass watch <プロジェクトのディレクトリ>

Compassの設定ファイル（config.rb）について

Compassプロジェクトを作成する際に、デフォルトで設定されるものは以下のとおりです。

http_path

ウェブサーバ内で動かす場合のプロジェクトのルートディレクトリ

css_dir

CSSファイルが書き出されるディレクトリ

sass_dir

Sassファイルの保存ディレクトリ

images_dir

画像の保存ディレクトリ

javascripts_dir

JSファイルの保存ディレクトリ

その他に知っておくと便利そうな設定値：

output_style

以下の4つから選択できます。

a. :nested
Sassと同じように入れ子を行のインデントで表して書き出される

#main {
  color: #333;
  background: #eee; }
  #main p {
    font-size: 1em; }

b. :expanded
1つのプロパティが1行のフォーマットで書気出される

#main {
  color: #333;
  background: #eee;
}
#main p {
  font-size: 1em;
}

c. :compact
1つのセレクタが1行のフォーマットで書き出される

#main { color: #333; background: #eee; }
#main p { font-size: 1em; }

d. :compressed
スペースや改行が削除されて書き出される

#main{color:#333;background:#eee}#main p{font-size:1em}

environment

:production、:developmentから選べる「環境」設定です。環境ごとにCSSや画像フォルダ、また、output_styleを変更するのに便利です。たとえば、:development環境では:expandedで、:production環境では:compressedでCSSを書き出すといったようにするなど。environmentの使い道については、「Compassで本番用と開発用で設定を振り分けてみる。 — howtohp」という記事が参考になります。

他にもいろいろ設定値がありますが、このあたりが設定できていればとりあえず問題なさそうです。他の設定値のレファレンスはこちら。
→ 本家の設定ファイルのリファレンス
→ [Compass] 超訳 Configuration Reference — WebTecNote

まとめ

僕にとっては、なかなかとっつきにくいSassやCompassでしたが、使い始めたら便利でなくてはならないツールになるんだろうなぁと思っています。CSS4にはSassの機能を追加するようなプロポーザルも出されていて、将来的には似たような拡張がCSS自体に組み込まれる可能性もありそうです（というか、そうなったら良いのに…）。すでにCSS変数はW3CのWorking Draftとして存在していたんですね。。。

CSSのメンテナンスの効率化などを考えると、やっぱりSassやCompassなどのツールを活用しない手はないよなぁと思っています。しっかり覚えて、日常の業務ではやく使えるようになりたいなと思う今日この頃です。

参考

• CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較
• Windows 7 環境においてScout導入時のエラーの対処法
• パフォーマンスからみるSass/Compass 第2回：CompassによるCSS Sprite
• compassのベンダープリフィックス制御 — NAVER Engineers’ Blog
• CSS Preprocessor Advent Calendar 2012

読むことたくさんありますが、マイペースでいきますかね。。。笑

2013年1月6日に公開され、2017年11月23日に更新された記事です。

この記事をシェアする

• ツイート
• シェアする
• ブックマーク
• Pocketに保存