知って得するSass/Compassのインストールと使い方：爆捗！ WordPressテーマ作成ショートカット（5）（2/2 ページ）

» 2014年02月25日 18時00分公開

Compassのインポート

　CompassはSassを利用しているので、Compassを利用するときは@importを使ってさまざまな機能を追加していく形になる。テスト用のscssを用意していろいろ試してみることにする。テスト用scssは「test.scss」とした。

　Compassを利用するときはまず、コアとなるフレームワークを読み込む必要がある。

@import "compass";

　これでCompassのCSS3、Typography、Utilitiesの3つの機能が利用できるようになる。もし、CSS3だけにしたい場合は以下のように記述すればOKだ。

@import "compass/css3";

　さて、これから.scssを書いていくのだが、Compassを利用する場合、CompassでサポートしているCSSはできるだけCompassの機能をインポートして使った方がよい。CSS3でCompassがサポートしているのは以下の20の機能だ。

Appearance - Specify the CSS3 appearance property.
Background Clip - Specify the background clip for all browsers.
Background Origin - Specify the background origin for all browsers.
Background Size - Specify the background size for all browsers.
Border Radius - Specify the border radius for all browsers.
Box - This module provides mixins that pertain to the CSS3 Flexible Box.
Box Shadow - Specify the box shadow for all browsers.
Box Sizing - Specify the box sizing for all browsers.
Columns - Specify a columnar layout for all browsers.
Filter - Specify the (image) filter for all browsers.
Font Face - Specify a downloadable font face for all browsers.
Hyphenation - Mixin for breaking space and injecting hypens into overflowing text
Images - Specify linear gradients and radial gradients for many browsers.
Inline Block - Declare an element inline block for all browsers.
Opacity - Specify the opacity for all browsers.
CSS Regions - Specify CSS Regions for supported browsers.
Text Shadow - Specify the text shadow for all browsers.
Transform - Specify transformations for many browsers.
Transition - Specify a style transition for all browsers.
User Interface - Declare an element inline block for all browsers.

　以下、Compassを使うと何が便利になのか、実際のコードとともに解説する。

【利点1】ベンダープレフィックスを書く必要がなくなる

　取りあえず、以下のように.scssを書いてみよう。

div{
     @include inline-block;
     @include border-radius(4px, 4px);
     @include opacity(.7);
}

.scss

　そして、これが変換後のCSSだ。

div {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  -webkit-border-radius: 4px 4px;
  -moz-border-radius: 4px / 4px;
  border-radius: 4px / 4px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}

.css

　実際に書いていくと非常に面倒な各ブラウザーへの対応（ベンダープレフィックス）がまとめ記述されていることが分かる。

【利点2】画像をフォルダーに置くだけでCSSスプライトを生成

　Compassの機能で忘れてはならないのが、「CSSスプライト」の作成機能だ。CSSスプライトは細かい画像などは1枚にまとめてしまって、CSSで表示位置をコントロールすることだ。

　もともとは大規模なサイトでサーバーへのリクエストを削減し、負荷を下げる目的で実装され始めたのだが、マウスオーバーで画像を変化させる際にも有用なため、よく用いられるようになった。

　ところが、CSSスプライトを作成するのは少々骨の折れる作業で、Photoshopを自動化させたり、外部のサービスを利用したり（これは秘密保持契約的に大丈夫なのかと心配になるが）と、制作者はさまざまな工夫を凝らして対応していた。ちなみに、筆者はCSSスプライト化したいアセットをFireworksでチマチマとつないでいた。

　CompassでCSSスプライトを作成するには、「images」フォルダー内にCSSスプライトにしたい画像が入っているフォルダーを作り、指定するだけだ。そして、.scssには以下のように記述する。フォルダーにはあらかじめ、「cm.png」「interview.png」「making.png」というファイルを置いた。

@import "cm/*.png";
@include all-cm-sprites;

.scss

　すると、以下のような.cssに変換される。

.cm-sprite, .cm-cm, .cm-interview, .cm-making {
  background: url('/images/cm-sfe45056dd2.png') no-repeat;
}
.cm-cm {
  background-position: 0 -80px;
}
.cm-interview {
  background-position: 0 -40px;
}
.cm-making {
  background-position: 0 0;
}

.css

　パーツが統合された画像が生成され、それに応じたcssが出力された。

【利点3】CSSスプライトの:hover対応は画像ファイル名を変えるだけ

　マウスオーバーで画像を変えたい場合、CSSでは「:hover」を利用するのだが、Compassを利用すると、以下のように劇的に簡単になる。

　まず、:hover用の画像のファイル名には_hoverを付けておく。「cm.png」「interview.png」「making.png」に対して「cm_hover.png」「interview_hover.png」「making_hover.png」という感じだ。

　.scssは先ほどのものを変更しなくても大丈夫だ。再度.cssに変換すると、画像のファイル名を変えるだけで、画像ファイルが再生成され、:hoverの内容が追記された。

.cm-sprite, .cm-cm, .cm-interview, .cm-making {
  background: url('../images/cm-sb41e152bfe.png') no-repeat;
}
.cm-cm {
  background-position: 0 -200px;
}
.cm-cm:hover, .cm-cm.cm_hover, .cm-cm.cm-hover {
  background-position: 0 -80px;
}
.cm-interview {
  background-position: 0 -160px;
}
.cm-interview:hover, .cm-interview.interview_hover, .cm-interview.interview-hover {
  background-position: 0 -40px;
}
.cm-making {
  background-position: 0 -120px;
}
.cm-making:hover, .cm-making.making_hover, .cm-making.making-hover {
  background-position: 0 0;
}

.css

【利点4】CSSスプライトの作り方は、柔軟に変えられる

　CSSスプライトの生成にも幾つかのオプションがあり、並び方を変更できるようになっている。また、クラス名を自分で命名したり、CSSスプライトを手動で生成することも可能になっている。

　これはCSSスプライトの利用の仕方に、それぞれのユーザーの思惑があり、それに柔軟に対応できるようにしたためだろうと考えられる。

次回は、Compassを使ってWordPressテーマ作成を爆捗！

　筆者は、このCSSスプライトの機能だけでもCompassを利用する価値があると思っている。この機能はコーダーはもちろんだが、デザイナーの負担軽減も期待できるからだ。運用時はそれぞれの作業範囲を見た上で、Compassを適切に利用していくようにするといいだろう。

　今回はCompassの機能をざっと紹介した。次回はCompassを実践で利用していくことにしよう。

サンプルのダウンロード

　本稿で紹介したscssファイルと変換したcssファイルを、GitHubに置いておいたので、どのように展開されているかを確認してみてほしい。本連載で作成したサンプルのコードやファイルは全てGitHubからダウンロードできる。

「次回」へ

「爆捗！ WordPressテーマ作成ショートカット」バックナンバー

岡本紳吾（おかもとしんご）

1975年大阪生まれ。2000年ごろよりAdobe Flash（当時はmacromedia）を使ったコンテンツ制作を始め、Flash歴だけは異様に長い。自他共に認めるFlash大好きっ子。2008年より活動の拠点を東京に移し、2011年に独立。最近はAdobe Edge系を活用し、HTML5コンテンツも手掛ける。Webプロデュースと制作と山岳メディア運営の会社、hatte Inc.代表取締役。Twitter：@hage、Facebook：shingo.okamoto