ProgrammingHTML/CSS過去記事
過去記事

Compassの使い方

Compassの概要

SassのMixin機能やインポートは自分で用意することもできますが、すでに様々なコードが配布されています。
今回紹介する Compass はよく使うMixinが多数用意されており、さらに便利な機能が多数搭載されています。
ここではCompass の機能から使い方までを紹介します。

Compassの主な機能

CompassはCSS作成作業を効率的にするよう設計されたSassフレームワークです。

Compass はSassのMixinと関数を多数ライブラリ化しており、その他様々な機能を提供しています。
たとえば、リセットやグリッドレイアウト、バーティカルリズムなど多数のデザインパターンを簡単に導入できたり、CSSスプライト機能や、開発と本版環境でのURLを違いを簡単に処理するためのアセットURL機能などもあります。

Compassの使用例

compassモジュールの読み込み

Compassを使うには、@importを使ってcompassモジュールをインポートします。

@import "compass";

これで下記モジュールがインポートされます。

  • CSS3
  • Typography
  • Utilities

CompassのMixinを利用する

Compassが用意するMixinは自分で作成したMixinと同じ方法で呼び出せます。
よく使う透過の opacity は同名の opacity() というMixin スニペットが用意されているため、@include を使って次のように指定することができます。

div{
	@include opacity(.5);
}

出力結果は下記で、これで各種ブラウザ対応を気にする必要がなくなります。

div {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}

ベンダープレフィックス対応が必要な border-radius も次のように簡潔に書けます。

div{
	@include border-radius(5px);
}

出力結果は下記になります。

div {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

デフォルトスタイルを調節するリセットCSSも下記1行で呼び出せます。

@import "compass/reset/";

Compassの使用方法

CompassのインストールはSassのインストール編の際に紹介しているので、ここではCompassがインストール済みとして進めます。
また、Sassのインストール編で扱っているように Atom + Koala 環境を前提とします。

Koala はデフォルトで Compass が有効になっていないので、Compass が標準で使われるように設定を変更します。

  1. Koalaを起動します。
  2. 左上の歯車のアイコンをクリックし、環境設定を表示します。
  3. 左側メニューから[Sass] →[Compass Mode]をチェックします。

これでCompassが利用可能になりました。
あとはプロジェクト毎にCompass用の設定ファイルを作成して準備は完了です。

Compass用の設定ファイル作成

Compass用の設定ファイルは次の方法でひな形を出力できるので、それを利用して必要な個所を変更するのが簡単です。

まず準備として、任意の場所に test というフォルダと、その中に空の test.scss ファイルを作成し、test フォルダを Koala にプロジェクト登録してください。
Compassの設定ファイルがないためエラーが表示されますが、これから作成するので今は気にしなくて問題ありません。
Koalaのパネルに表示される test.scss をクリックすると、右カラムオプションが表示されると思います。先ほど設定画面にて [Compass Mode] をチェックしたので、右カラムの [Compass Mode] にチェックが入っているはずです。チェックがはいていなければ、ここでチェックし、さらに設定画面で [Compass Mode] をチェックするか、プロジェクト登録時に毎回チェックしてください。

次は設定ファイルの作成方法です。

  1. 左カラムにある test フォルダを右クリックし、[プロジェクト設定]-[設定ファイルを作成]-[For Compass]を選択します。
    koala_cap2
  2. 編集するか聞かれるので、[OK]ボタンを押すか、testフォルダに作成されたconfig.rbを開きます。
  3. config.rbはプラグインやファイルの保存場所などを指定する設定ファイルです。
    環境やプロジェクトに合わせて変更しますが、テスト的にすべて同じ階層で良ければ下記のようにします。 
    http_path = "/"
css_dir = ""
sass_dir = ""
images_dir = ""
javascripts_dir = ""

これでCompassが使える用になりました。
この設定ファイルの作成はプロジェクトを作成する事に用意してください。

なお、config.rb にある基本的なオプションはconfig.rb - Compassの設定ファイルで説明しています。

Compassが提供するMixinスニペット

Compassが提供するMixinスニペットは公式サイトで確認できます。

よく使うMixinスニペット集

角丸：border-radius()
@include border-radius(5px);

CSS出力は下記のとおりです。

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
影：box-shadow()
@include box-shadow(blue 2px 2px 4px);

CSS出力は下記のとおりです。

-moz-box-shadow: blue 2px 2px 4px;
-webkit-box-shadow: blue 2px 2px 4px;
box-shadow: blue 2px 2px 4px;
透明度：opacity()
@include opacity(.5);

CSS出力は下記のとおりです。

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: 0.5;
アニメーション：transition()
@include transition-property(width);
@include transition-duration(2s);

CSS出力は下記のとおりです。

-moz-transition-property: width;
-o-transition-property: width;
-webkit-transition-property: width;
transition-property: width;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
-webkit-transition-duration: 2s;
transition-duration: 2s;
はみ出した文字を...で置き換える：ellipsis()
@include ellipsis();

CSS出力は下記のとおりです。

white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
要素を横並び：inline-block()
@include inline-block();

CSS出力は下記のとおりです。

display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;

下記ページでMixinのサンプルが多数紹介されているので、よければ参考にしてみてください。

関連記事