株式会社いいオフィスFC募集その2
株式会社いいオフィスFC募集その2
2015.07.15

CSSの常識が変わる!「Compass」の基礎から応用まで!

本命のCompassを使おう!


http://compass-style.org/

上記のSassの4つの特徴を知っておけば、基礎はもうばっちり。これでだいぶCSSを楽に書けると思います。
だがしかし! 進化はまだまだ止まらない!
Compassを使えばSassを飛躍的に使いやすくなることができるのです!
改めてCompassとは何かを説明すると、Sassをさらに強化したフレームワークで、便利なMixin群、スプライト自動作成、プロジェクトごとに設定ファイルを適用するなど、便利な機能が超満載!

Compassをインストール

Sassと同じく、コマンドラインでのインストール方法と使い方だけを紹介しておきます。GUIを使いたい方であれば飛ばしても構いませんが、一応基礎としてという意味でもざっとと知っておいたほうがいいと思います。
Sassと同じく、Rubyをインストールしておいてください。ターミナルで下記を入力してインストールしましょう。
sudo gem update --system

sudo gem install compass

よく使うコマンド

用途 新規プロジェクトを作成し、compassの初期化をおこなう
書式 compass create プロジェクト名
用例 compass create test
(’test’という名前のフォルダを作り、compassに必要なファイルやフォルダを入れる。)
用途 Sassファイルを監視して、セーブされたらCSSにコンパイルする
書式 compass watch [プロジェクトのパス]
用例 compass watch ~/Desktop/test/
(’~/Desktop/test/’フォルダでSassファイルを監視して、変更されたらCSSにコンパイルする。)

普通に使う分にはこの2つのコマンドさえ覚えれば十分です。
実例を見てみましょう。
compass create demo
と打てば、demoフォルダの中にはこうなっているはずです。

中で1番重要なのは「config.rb」というファイルです。デフォルトだと中は下記のようになっていると思います。

http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

Compassの各設定が記述されているのがわかります。このファイルでさまざまな設定をおこないますが、必要最低限の設定だけ書くなら以下の2つだけで大丈夫。

#cssのコンパイル先
css_dir = "stylesheets"

#sassファイルの保存先
sass_dir = "sass"

公式ページで設定一覧のレファレンスが載ってます。結構多くて通常なら要らないとは思うのですが、一応参考までに。
Configuration Reference:
http://compass-style.org/help/tutorials/configuration-reference/

実用的な設定

Rubyでの記述になりますが、ちょっと実用性が高いと思われる項目だけ参考用に載せておきます。あとで使うときにまた触れますので、一旦スキップしてもらって構いません。

プロパティ名 説明
output_style シンボル cssのコンパイルスタイル。
:nested, :expanded :compact :compressedのうちのどれか1つ
relative_assets 真偽値 ヘルパー関数で生成するURLを相対パスか、それとも絶対パスで表現するか。
スプライトを生成するときにこれをtrueにすることで相対パスになる。
sass_options ハッシュ Sassのコンパイラに直接渡すオプション。Sassのマニュアルを参考。
css_dir 文字列 cssファイルの出力先、プロジェクトフォルダからの相対パス。
sass_dir 文字列 Sassファイルの保存先、プロジェクトフォルダからの相対パス。
additional_import_paths 配列 プロジェクトフォルダの外に置かれているSassファイルを読み込むためのパス。フレームワークなどをインポートするのに役立ちます。
preferred_syntax シンボル 使用する文法
:scss か :sass に設定できる(デフォは:scss)。

 

Compassを使ってみる

Compassを使うにはまず、compassのモジュールをインポートする必要があります。
ファイルの先頭などで、下記を記述してください。

@import "compass";

これでCompassのメインモジュールをインポートすることができます。
実際には以下のモジュールをいっぺんにインポートしています。

  • CSS3
  • Typography
  • Utilities

CSS3をCompassで書く

CSS3のプロパティを書くときに、ベンダーフィックスをずらずらと書かなきゃいけなくて面倒な上に可読性も最悪です。
それをCompassで用意されているCSS3のMixinで書くと・・・

@import "compass";

p{
@include inline-block;
@include box-shadow( 0 0 10px #a82f34);
@include opacity(.5);
}

コンパイル後↓

p {
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
-webkit-box-shadow: 0 0 10px #a82f34;
-moz-box-shadow: 0 0 10px #a82f34;
box-shadow: 0 0 10px #a82f34;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: 0.5;
}

なんてこった! ベンダーフィックスどころか、クロスブラウザまで対応!
見ての通り、基本的にはCSSを書くのと同じ感覚で書いていくだけなので、専用の書式を覚える必要はありません。
CSS3モジュールでは、現時点で以下のMixinが用意されています。

Compass CSS3 – Compass公式ページ:
http://compass-style.org/reference/compass/css3/

奥義!CSSスプライト自動生成!

皆さんはCSSスプライトをどうやって作ってますか?
素直にPhotoshopで並べて座標を自分で調べる人もいれば、オンラインサービスを使ってスプライト画像とコード生成する人もいると思います。
僕はちょっと前まで自作のPhotoshopスクリプトを使ってましたが、今はCompassを使って自動生成しています!

自作のPhotoshopスクリプトについては、こちらの記事で紹介しているので、気になる方はぜひ。

さて、話を戻して、Compassで何ができるかというと、スプライトの個々のパーツを1枚のスプライト画像に生成してくれる上に、background-positionとwidthとheightまで丁寧に作ってくれるんです!
パーツ画像が追加されるその都度、再合成するので、後からでも気軽にパーツ追加できて、管理がとてつもなく楽に。

使い方には主に自動生成と手動生成の2種類、あわせて紹介します。

マジックインポートを使ってのスプライト作成

「マジックインポート」すなわち「自動インポート」。
仮にimagesフォルダの下にfoooooというフォルダがあって、その下にそれぞれのパーツが置かれているとして・・・

images/fooooo/new.png
images/fooooo/edit.png
images/fooooo/save.png
images/fooooo/delete.png

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

とするだけで・・・

.fooooo-icons-sprite,
.fooooo-delete,
.fooooo-edit,
.fooooo-new,
.fooooo-save { background: url('/images/fooooo-s34fe0604ab.png') no-repeat; }

.fooooo-delete { background-position: 0 0; }
.fooooo-edit { background-position: 0 -32px; }
.fooooo-new { background-position: 0 -64px; }
.fooooo-save { background-position: 0 -96px; }

が生成されます!
@import “fooooo/*.png”; と書いただけで、foooooフォルダの下にある全てのpngファイルを拾って、スプライト画像を生成してくれてるんです。
次に、 @include all-fooooo-sprites; というMixinを使って、パーツファイルの名前に因んだクラスを自動で作ってくれました! 中身はそれぞれのパーツのbackground-positionが書かれています!

@includeの書式
@include all-フォルダ名-sprites;
@importの書式
@import “フォルダパス/*.png”;

※imagesフォルダの下から探すので、”images/fooooo/*.png” ではなく、”fooooo/*.png” を使うべきです。
画像が違う場所、例えば「img」などに置かれている場合、config.rbファイルで画像フォルダ(images_dir)を設定する必要があります。

background-position の他にwidthとheightも欲しい? No Problem!

@importする前にこんな変数を定義すれば大丈夫です。

$fooooo-sprite-dimensions: true;

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

ちなみに、この種の変数はconfiguration variableと言い、Compassでは多用されています。他にもこんなのがあります。

$<icon>-spacing;

生成するスプライト画像のパーツとパーツの間隔
例:$fooooo-spacing: 20px;

 

$<icon>-layout:diagonal;

斜めのレイアウト、これなら背景をリピートしても大丈夫ですね。
例:$fooooo-layout:diagonal;

$<icon>-layout:smart;

無駄なくちょうどすっぽりと収まるようにレイアウト。
例:$fooooo-layout:diagonal;

マジックセレクタ

active target hoverなどの状態に応じたスプライトも作りたい場合、ファイル名に_active _target _hoverと付け加えるだけで、compassが勝手に作ってくれます!

仮に、下記のようなファイルをimagesフォルダに置かれているとして

images/fooooo/new.png
images/fooooo/new_hover.png

Sassの方では・・・

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

生成したCSSは・・・

.fooooo-sprite, .fooooo-new {
background: url('/images/fooooo-sffd74e256b.png') no-repeat;
}

.fooooo-new {
background-position: 0 -113px;
}
.fooooo-new:hover, .fooooo-new.new_hover, .fooooo-new.new-hover {
background-position: 0 0;
}

ちゃんとhoverの擬似セレクタまで書いてくれたんですね!

手動でクラスに割り当てる

自動生成のクラス名が気に入らない? 簡単に手動で割り当てることもできます。
@include all-fooooo-sprites; を使わずに、@include fooooo-sprite(パーツ名); を使いましょう。

@import "fooooo/*.png";

.actions {
.new { @include fooooo-sprite(new); }
.edit { @include fooooo-sprite(edit); }
.save { @include fooooo-sprite(save); }
.delete { @include fooooo-sprite(delete); }
}

とすると・・・

.fooooo-sprite,
.actions .new,
.actions .edit,
.actions .save,
.actions .delete { background: url('/images/fooooo-s34fe0604ab.png') no-repeat; }

.actions .new { background-position: 0 -64px; }
.actions .edit { background-position: 0 -32px; }
.actions .save { background-position: 0 -96px; }
.actions .delete { background-position: 0 0; }

ちゃんとbackground-positionが付与されているのがわかると思います。

手動でスプライトを生成する

マジックは便利だけど、場合によってはbackground-positionをずらしたいなんていうこともあるので、そういった場合は融通性の高い手動モードに切り替えて作業します。
この場合はマジックインポートをやめて、代わりにsprite-mapというCompassの関数を使います。

sprite-mapの書式
sprite-map([アイコンのパス, …])

まずはsprite-mapでスプライト画像を生成して、戻り値としてスプライト画像のURLが帰ってくるので、

$icons: sprite-map("icons/*.png");
background: $icons;

とすると

background: url('/images/sprites/icons-a2ef041.png?1234678') no-repeat;

になるので、次に下記の関数とMixinを使います。

background-positionを生成する関数: sprite-position
widthとheightを生成するMixin: sprite-dimensions

sprite-position($map, $icon, $offset-x, $offset-y);
@include sprite-dimensions($map, $icon);

$map: sprite-mapの戻り値
$icon: パーツのファイル名
$offset-x: xのオフセット
$offset-y: yのオフセット

@import "compass";
$fooooo:sprite-map("fooooo/*.png");
p{
@include sprite-dimensions($fooooo,new);
background-position: sprite-position($fooooo,new); /*関数のため、@includeは不要*/
}

コンパイル後↓

p {
height: 113px;
width: 113px;
background-position: 0 -113px;
}

スプライト生成機能を使う上での注意点

注意してほしいのは、Compassではデフォの状態だとbackground-imageなどでURLの指定に絶対パスが使われていること。
特別な事情がない限り通常相対パスを使うと思うので、相対パスに変えたほうがいいでしょう。
config.rbを開いて、下記を追加すれば絶対パスから相対パスに変えることができます。

relative_assets = true

実用的なMixin

CSS3周りのMixin以外にも結構たくさん用意されてますので、実用的なものだけピックアップして、紹介します。

公式ページはこちら:
http://compass-style.org/reference/compass/

応用の巻

変数でfont-sizeを記述

皆さんはfont-sizeを何の単位で指定していますか? LIG社内では特別の事情がない限り、原則的にはパーセンテージで記述することになっています。
レスポンシブサイトなどを作る際、デバイスごとにフォントサイズを調整するときや文字サイズを大中小に変更するボタンを付けるときにルートのフォントサイズだけ変えれば下層のフォントのフォントも勝手にあわせてくれるので、柔軟性が高くて、みんなパーセンテージで記述してます。
でもパーセンテージってベースフォントの違いで変わってくるし、何よりも覚えにくいです。
しかし! この問題もSassにかかれば、一発で解決!
変数にパーセンテージを入れて、パーセンテージの代わりに変数を使えばいいんです!
例えば、ベースフォントサイズが13pxの場合

$px11 : 85%;

/* フォントサイズを指定するときは変数で */
font-size : $px11;

ベースフォントが 12px ~ 16px の場合の変数を定義したパーシャルファイルを作ったので、共有します。ご自由に利用してください。

sass-ptp – GitHub:
https://github.com/xipx/sass-ptp

変数を一杯定義したPartial (パーシャル)をインポートして使います。

@import "ptp-12";
p {
font-size: $px12;
}

SassでMedia Queryを使う

Media Queryに限らず、ネット上で色んな実用的なMixinが公開されてますので、それらを利用しない手はない!
最近レスポンシブデザインでMedia Queryを書く機会が多くなってきて、色んなデバイスがありすぎてモニタサイズとか覚えるのが大変〜〜。
そんなときのためのSassです!
今回はMedia Queryに使えるMixinを2つ紹介します。

野中龍一さんのMixinのほうが完成度が高くてオプションも多いのでオススメです!!
使い方はGitHubのページにも載ってますが、こんな感じで、面倒なMedia Queryもこの通り、超簡単に書けちゃいます!

例に、iPhoneの縦のときのMedia Queryを書いてみましょう。

@include mq-mobile('portrait', 'old') {
.span3:120px;
background-color: #fff;
}

出力はこんな感じです、手動で原始的に書くならかなり大変です。

@media only screen and (min-width: 0) and (max-width: 320px) and (-webkit-max-device-pixel-ratio: 1) {
.span3: 120px;
background-color: #fff;
}
@media only screen and (min-width: 0) and (max-width: 320px) and (-moz-max-device-pixel-ratio: 1) {
.span3: 120px;
background-color: #fff;
}
@media only screen and (min-width: 0) and (max-width: 320px) and (-o-max-device-pixel-ratio: 2 / 2) {
.span3: 120px;
background-color: #fff;
}
@media only screen and (min-width: 0) and (max-width: 320px) and (-ms-max-device-pixel-ratio: 1) {
.span3: 120px;
background-color: #fff;
}
@media only screen and (min-width: 0) and (max-width: 320px) and (max-device-pixel-ratio: 1) {
.span3: 120px;
background-color: #fff;
}

フレームワークを1箇所で管理する

フレームワークとは、例えば上記で紹介したMedia QueryのMixinやリセット用のCSSなど、複数のプロジェクト間で共有して使ってるファイルのことをフレームワークと言います。
この種のファイルは共通して使ってるので、1箇所にまとめて管理したほうが毎回コピペせずに済むし、フレームワークが更新したとき全てのプロジェクトに反映されて管理がとっても楽になります。

config.rbで指定する

config.rbで以下の設定を加えると指定のパスを読み込ませることができます。

additional_import_paths = [‘フレームワークのパスその1’,’その2’,…]

例えば、Dropboxに入れて社内で皆で常に同じフレームワークを使う場合だとこうですね。

additional_import_paths = ['/Users/wang/Dropbox/framework/']

CodeKitで指定する

CodeKit使ってるなら、やり方はスーパに簡単です!

「add framework..」を選択して、フォルダを選択すればOK。

フレームワークのインポート

上記の手続きを済ませたら、普通に@importを使ってインポートして使ってください。パスは選択したフレームワークディレクトリからの相対パスになります。

ブラウザでSassを検証する方法

Sassで書いているとは言え、最終的に使用しているのはCSSで元のSassファイルではありません。ですから、ブラウザで要素を検証してCSSをチェックするとき、最終的に出力したCSSを見ます。
これでは、Sassファイルの何行目にあるかわからなくて非常に不便ですよね。
本セクションでは、ChromeとFirefoxをSassに対応させる方法を紹介しておきたいと思います。

まずはCompass側での設定をおこなう

ChromeもFirefoxも、この設定をしておかないとうまく機能しないので、必ずこのステップを踏んでください。
やり方は簡単です。config.rbを開いて、下記を追加するのみ。

sass_options = { :debug_info => true }

再度コンパイルし、出力CSSのセレクタの上に下記が付いたら、設定が効いている証拠です。

@media -sass-debug-info{filename{font-family:file:///Applications/MAMP/htdocs/magazine/sass/common.scss}line{font-family:\0000385}}

Chrome

Chromeは常に先進的な試みを実施し続けているだけに、プラグインなしに「体験機能」を使うことでできちゃうんです。

    1. URL入力欄で、chrome://flagsと入力して、開いたページで「Enable Developer Tools experiments」をオンにする。

  1. Chromeを再起動して、もう一回検証してみると・・・ おおっ!ちゃんとSCSSを認識してる!

Firefox

FirefoxではFireSassというアドオンをインストールすることで実現します。
公式ページでインストールして、再起動すればSCSSを認識できるようになります。

FireSass for Firebug 公式ページ:
https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/

まとめ

ここまで読んでくれた方なら、SassとCompassの便利さを身を持って体験していただけたかと思います。ネット上にはSassとCompassを元に作られたライブラリが腐るほどあるし、それらをもっと自分のニーズにあわせて活用できたらきっと仕事がもっと楽になるはずです!
デモ動画でも使っていた「compass-recipes」とか、グリッドシステムの「ZenGrids」などいろいろあると思いますので、どんどん利用してエレガントにCSSを書きましょう!

「デジタルハリウッドSTUDIO 上野 by LIG」で
デザインを学んでみる

  • 1
  • 2