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


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

SASSを活用していますでしょうか?Compassを併用することで、SASSをもっと便利に使っていくことができます。本記事では、CSSフレームワークのCompassについてご紹介します。

目次
  1. Compassとは?
  2. Compassをインストールする
  3. Rubyをインストールする
  4. SASSをインストールする
  5. Compassをインストールする
  6. Compassの基本的な使い方
  7. フォルダを作成する
  8. Compassプロジェクトを作成する
  9. Compassを起動する
  10. Compassを停止する
  11. あとがき

Compassとは?

Compass Home | Compass Documentation

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をもっと便利に使っていきましょう。


関連記事

中西洋平
この記事を書いた人
中西洋平
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp