SASSユーザー必見！Compassの基本と導入方法を徹底解説

Compassとは？

Compassとは、SASSを便利に使うためのCSSフレームワークのこと。SASSを使ってCSSを書くときは、Compassを併用することが一般的です。

Compassを使うとCSSの開発を便利に進めることができます。便利なmixinが使えますし、CSSスプライトも使えます。プロジェクトごとの設定をすることも可能です。

Compassをインストールする

それでは早速、Compassの使い方について見ていきましょう。まずはCompassのインストールから。

Rubyをインストールする

Compassを使うためには、SASSが必要です。SASSはRubyで動いているので、まずはRubyをインストールしておきましょう。

SASSをインストールする

SASSをインストールします。下記のコマンドを実行してください。

gem install sass

正常にインストールできたか、下記のコードでバージョン確認をしておきましょう。

$ sass --version

Compassをインストールする

Compassもgemを使ってインストールします。下のコマンドを打ち込んで、Compassをインストールしましょう。

gem install compass

こちらもインストールが正しくできたか、下記のコマンドで確認しておきましょう。

compass version

Compassの基本的な使い方

インストールができたところで、Compassを使う時の基本的な流れについて見ていきましょう。

フォルダを作成する

Compassを使うために、プロジェクト用のフォルダを作成しましょう。ターミナルの場合は、下のコードでフォルダを作成できます。

mkdir フォルダ名称

下記のコマンドで、作成したフォルダに移動してください。

cd プロジェクト用のフォルダ

Compassプロジェクトを作成する

Compassで新規プロジェクトを作成します。下記のコマンドで、カレントディレクトリにCompass用のフォルダや設定ファイルが作成されます。

compass create

作成されるファイルやフォルダは下記の通り。

• sass- stylesheets- config.rb

「sass」はSASSファイルを格納するフォルダで、コンパイルされたCSSファイルは「stylesheets」フォルダに保存されます。「config.rb」はCompassの設定ファイルです。

試しに、「sass」フォルダ内にSASSファイルを作ってみましょう。

@import "compass";

a {
     text-decoration: none;
     &:hover {
          text-decoration: underline;
     }
}

上記のように、Compassプロジェクトであることをimportで明示したのち、SASSコードを書きます。

Compassを起動する

Compassを起動します。下のコマンドを実行してください。

compass watch

Compassがプロジェクトを監視して、SASSファイルが更新された場合に自動でCSSファイルを出力してくれます。

先ほど作ったSASSファイルもコンパイルされているかと思います。「stylesheets」ディレクトリに、下記のコードを含むCSSファイルが出来ているでしょうか。

a {
     text-decoration: none;
}
a:hover {
     text-decoration: underline;
}

Compassを停止する

Compassを使わないときは、監視を止めておきましょう。「Ctrl+c」をクリックすれば、watchを停止することができます。

あとがき

Compassの基本や導入方法、基本的な使い方について解説しました。CompassはGUIツールもあるので、コマンドを使いたくない場合は検討してみてください。Compassを活用して、SASSをもっと便利に使っていきましょう。