ガジェット通信

見たことのないものを見に行こう

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

DATE:
  • ガジェット通信を≫


(編集部注*2013年2月7日に公開された記事を再編集したものです。)

こんにちは、デザイナーの王です。

今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。
全くの初心者でも問題ありません!

はじめに結論を言うと、CompassでCSSを書くと

早い!
見やすい!
メンテしやすい!
コード量がぐっと減る!
一度使い出したら最後、もう元には戻れない!

一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず!
簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください!

Compassとは?

Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。

Sassとは

では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sheets」でCSSのメタ言語です。「メタ言語」とは、ある言語を生成するための言語なので、この場合「Sassという言語で記述したファイルをコンパイルして、CSSファイルを生成する」ということになります。

「ええ?コンパイル?CSSを生成?それなら最初からCSSを書けば済む話じゃないの!?」と思う人もいるかもしれません。
しかし、冒頭にも言ったように、Sassで記述すればさまざまなメリットがあるので、CSSよりもSassで書いた方がいいと思います。

Sassについての詳しいことは下記リンクで見ることができます。

Sass: Syntactically Awesome Style Sheets

http://sass-lang.com/

Sassの文法について

基本的にCSSと何ら変わらないので、極端な話100%CSSの文法で書いても全く問題ありません! これで一安心ですね!
しかし、折角Sassで書くなら機能をフルに活用したいので、まずはSassの基礎知識を把握しておきましょう!

SassとSCSS

Sassは、SassとSCSS(Sassy CSS)の2種類の文法で記述できます。一般的にはSCSSが使われています。違いは以下を見れば一目瞭然。

SCSS

table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}

Sass

table.hl
margin: 2em 0
td.ln
text-align: right

見ての通り、Sassは'{}’の代わりに、インデントを使って階層を見分けています。どちらが優れているのかは人それぞれだと思いますが、現在の主流はSCSSなので、今回はSCSSで書いていきたいと思います。

※もしSassの文法を使いたければ、ファイルの拡張子を.sassにすれば大丈夫です。

Sassを使うには

Sassはコマンドラインソフトなので、基本的にコマンドを打って使います。ただ最近ではGUIのソフトも増えてきているので、両方あわせて紹介しますね。

コマンドラインで使う

コマンドラインとは言え、別にそんなクレイジーなことはやらないのでご安心ください。

※SassはRubyで書かれているプログラムのため、動かすにはまずRubyをインストールしておく必要があります。

Macでのインストール

MacではRubyがプリインストールされているので、Rubyのインストール作業は不要です。このままSassをインストールしちゃいましょう。

まず、ターミナルを開いて、下記のコマンドでSassをインストールできます。
sudo gem install sass
当たり前ですが、インターネットが繋がってない環境ではインストールできません。

Windowsでのインストール

まずはRubyをインストールしましょう。
下記リンクからダウンロードしてインストールしておいてください。
Rubyの公式ダウンロードページ:
http://rubyinstaller.org/downloads/
インストール後コマンドプロンプトからRubyのコマンドが使えます。Sassのインストール方法自体はMacと一緒ですので、割愛します。

GUIソフト

CodeKit(Mac)

http://incident57.com/codekit/

Macユーザならオススメです!
Sassだけに限らず、Less、Sass、Stylus、Jade、Haml、Slim、CoffeeScript、Javascript、Compassと多種多様なメタ言語を自動コンパイルしてくれる優れもの。他にもlive reload(ファイルをセーブされるたびにブラウザを自動的にリロードする)やjsLint(JavaScriptの文法チェック)など便利機能が盛りだくさん!

Hammer(Mac)

http://hammerformac.com/

Sass、CoffeeScript、HAML、Markdownなど、多彩なコンパイラを持ちながら、HTMLのインポート、画像プレースホルダ、変数の使用など独自の機能も多数盛り込まれたユニークなアプリです。

Scout(Win&Mac)

http://mhs.github.com/scout-app/

WindowsとMacのどっちでも動くフリーソフト。ちょっと機能が貧弱ですが、普通に使う分には十分だと思います。

Prepros(Win&Mac)

http://alphapixels.com/prepros/

WindowsとMacのどっちでも動くフリーソフト。さまざまなプリプロセッサ言語に対応しており、live-refreshなどの機能もかなり充実しています。

Koala(Win&Mac&Linux&Ubuntu)

http://koala-app.com/

さまざまなプラットフォームで動くプリプロセッサです。Less、Sass、Compass、CoffeeScriptをサポートしています。

Compass.app

http://compass.handlino.com/

Compassの公式のアプリを使ったことはありませんが、見たところ大して目新しい機能もないと思うので、MacユーザーでしたらCodeKitをオススメします。

よく使うコマンド

GUIを使うならこのセクションを飛ばしても大丈夫です。コマンドでの使用が必要になったときに参考にしてください。
コマンドの使い方はMacもWinも一緒です。今回はMac環境で記事を書いているので、スクリーンキャプチャがMacになりますが悪しからず。

用途
SCSSファイルをセーブしたら、CSSファイルにコンパイルする

書式
sass –watch SCSSファイル:CSSファイル

用例
sass –watch style.scss:style.css
(SCSSファイルをCSSファイルに)
sass –watch stylesheets/sass:stylesheets/compiled
(フォルダごと監視することもできる)


上記の用例では、Sassフォルダの中の全てのSCSSファイルを監視して、セーブしたら自動的にCSSフォルダにCSSファイルを書きだすようにするコマンドです。基本的な使い方はたったこれだけで十分だと思います。

他にもう1つだけ触れておきたいのは、アウトプットのスタイルですね。ざっと5種類のアウトプットスタイル種類があります。–styleをつけることで指定できます。

用途
アウトプットのスタイルを指定する

書式
sass –style スタイル名

用例
sass –style expanded –watch style.scss:style.css
sass –style compressed –watch stylesheets/sass:stylesheets/compiled

仮にこんなSCSSファイルがあるとしたら

.container{
background-color: red;
.span5{
background-color: pink;
}
.span7{
background-color: orange;
}
}

それぞれ以下のように出力されます。

nested(入れ子型、デフォルト)

.container {
background-color: red; }
.container .span5 {
background-color: pink; }
.container .span7 {
background-color: orange; }

expanded(展開型、最も一般的な書き方だと思います)

.container {
background-color: red;
}
.container .span5 {
background-color: pink;
}
.container .span7 {
background-color: orange;
}

compact(一行型)

.container { background-color: red; }
.container .span5 { background-color: pink; }
.container .span7 { background-color: orange; }

compressed(圧縮型、納品時など、最終出力のときには便利です)

.container{background-color:red}.container .span5{background-color:pink}.container .span7{background-color:orange}

Sassの基礎知識

以上のステップを終わらせたら準備はバッチリ! ここからSassの基礎知識について見ていきましょう!
CSSにはできないけどSassならできることは、主に以下の4つです。Sassの4つの特徴として見てもらえればいいかと思います。

セレクタの入れ子
セレクタの継承
変数
Mixin

1. セレクタの入れ子

.container{
background-color: red;
.span5{
background-color: pink;
}
.span7{
background-color: orange;
}
}

コンパイル後↓

.container {
background-color: red;
}
.container .span5 {
background-color: pink;
}
.container .span7 {
background-color: orange;
}

セレクタの他、プロパティまでも入れ子できちゃう!

p{
background: {
color: pink;
image: url(‘lig.png’);
repeat: repeat-y;
}
}

コンパイル後↓

p {
background-color: pink;
background-image: url("lig.png");
background-repeat: repeat-y;
}

「&」セレクタ

ブロック内で「&」という特別のセレクタが使えます。この「&」は「親セレクタ」と言って、ブロックの親セレクタを参照することができます。

a.btn{
border-radius: 5px;
background-color: pink;
&:hover{
background-color: orange;
}
}

コンパイル後↓

a.btn {
border-radius: 5px;
background-color: pink;
}
a.btn:hover {
background-color: orange;
}

メリット

関連のCSSを1箇所にまとめて記述できるので、何度も同じ親セレクタを書くことがなくなり、コードの見通しがよくなり、メンテもしやすくなります。
だから、コードを記述するとき極力入れ子構造で書いておきましょう!
以下の例を見てください。

/****** scss ******/
.a{
.b{
font-size: 12px;
}

.c{
font-size: 13px;
}

.d{
font-size: 13px;
}

.e{
font-size: 13px;
}
}

/****** 通常のcss ******/
.a .b {
font-size: 12px;
}
.a .c {
font-size: 13px;
}
.a .d {
font-size: 13px;
}
.a .e {
font-size: 13px;
}

上記の例で通常のCSSで、もし.aを他のクラス名に変更したい場合、aを親とする子が沢山あるので、全編の.aを新しいクラス名に置換しなければなりません。
しかしSassなら、1箇所でまとめて書いているので、最初の.aを変更すれば済みます。何よりも可読性が高くて読みやすいですね^_^

2. セレクタの継承

セレクタの継承とは、つまり、あるセレクタの内容をそのまま違うセレクタに適用することができるんです。
例を見てみましょう。

.p1{
background-color: gray;
color: red;
}

.p2{
@extend .p1; /* .p1のスタイルをそのまま引っ張ってきて */
border: 1px solid white; /* その上で独自のスタイルを書く */
}

コンパイル後↓

.p1, .p2 {
background-color: gray;
color: red;
}

.p2 {
border: 1px solid white;
}

メリット

コードをスッキリ書くことができます。

3. 変数

Sassでは変数が使えます。
変数の書き方はCSSチックで、こんなフォーマットになってます。
$変数名: 値;
値にはCSSで使える単位なら何でもOK。

$foo-width : 10px;
$foo-width : 10%;
$foo-line-height : 10;
$foo-color : red;
$red-shadow : 0 0 3px red;

使うときは普通にCSSのプロパティの値と置き換えれば大丈夫です。

$my-red:#a82f34;
$aw:400px;
a{
color: $my-red;
width: $aw + 300px; /* 四則演算もできる */
}

コンパイル後↓

a {
color: #a82f34;
width: 700px;
}

メリット

色などをわかりやすく記述できるのも嬉しいですが、それだけでなく同じ値が複数の箇所で共有して使われる場合には特に威力を発揮するんです。修正が必要な場合は、1箇所だけ直せばその変数が使われている全ての箇所にも反映するから、メンテがしやすいですね!

4. Mixin

Sassで最も重要な機能と言っても過言ではないでしょう! Mixinとは小さなテンプレートみたいなもので、うまく活用すれば大幅にコード量削減できます!
まずはMixinとは何か、以下のコードを見るのが1番わかりやすいと思います。

@mixin round-btn{
border: 1px solid #b8b8b8;
border-radius: 5px;
background-color: #c9c9c9;
}

@mixin auto-color($color){
@include round-btn;
color:$color;
}

.btn-blue{
/* mixinブロック内の中身を全て持ってくる */
@include round-btn;
color: blue;
}

.btn-red{
/* こっちは引数を渡してるパターン */
@include auto-color(red);
}

コンパイル後↓

.btn-blue {
border: 1px solid #b8b8b8;
border-radius: 5px;
background-color: #c9c9c9;
color: blue;
}

.btn-red {
border: 1px solid #b8b8b8;
border-radius: 5px;
background-color: #c9c9c9;
color: red;
}

@includeを使ってMixinの中身をインポートしてきているのがわかると思います。

Mixinの書き方

3通りあります。以下を見てください。

引数なし
@mixin Mixinの名前 {
中身…
}

引数あり
@mixin Mixinの名前(引数1,引数2…){
中身…
}

引数あり(デフォルト値付き)
@mixin Mixinの名前(引数1:デフォルト値,引数2:デフォルト値…){
中身…
}

Mixinの使い方

上記の3通りに対応した使い方は以下になります。先頭にディレクティブ@includeをつけて書いているのに注目してください。

@include Mixin名前;
@include Mixin名前(引数1, 引数2, …);
@include Mixin名前(引数1: 値, 引数2: 値, …);

@mixin transition($duration:3s){
-webkit-transition:$duration ease-out;
-moz-transition:$duration ease-out;
-ms-transition:$duration ease-out;
-o-transition:$duration ease-out;
transition:$duration ease-out;
}

.move{
@include transition(0.5s);
}

.move-b{
@include transition(); /* 引数渡してないのでデフォルト値の3sが使われる */
}

コンパイル後↓

.move {
-webkit-transition: 0.5s ease-out;
-moz-transition: 0.5s ease-out;
-ms-transition: 0.5s ease-out;
-o-transition: 0.5s ease-out;
transition: 0.5s ease-out;
}

.move-b {
-webkit-transition: 3s ease-out;
-moz-transition: 3s ease-out;
-ms-transition: 3s ease-out;
-o-transition: 3s ease-out;
transition: 3s ease-out;
}

Sassの「@import」を使う

@importを使うことで、特定のファイル(CSSかSass)の中身をそのまま持ってくることができます。

@import "foo.css";
@import "dir/foo.scss";

※URLはCSSフォルダからの相対パスになっています。
※CSSの@importとは違い、コンパイル後、インポートされるファイルに中身はそのまま@importを使った場所に挿入されます。一方、直接CSSの@importを使うと、パラレルにCSSをダウンロードができなくなるので、パフォーマンスの問題が出てきます。ですから、一般的には「使うべきではない」とされています。
しかしSassを使えば、むしろ@importを多用することで、ファイルの整理のしやすさ、レスポス数を減らすことなどに貢献できます。ただ、IEではセレクタの数に制限がある(4096個)ので、使いすぎにも注意です!

Partialとは?

@importされるSCSSファイルのことを「partial」と言います。「@importされるSCSSファイル」というのは「インポートはするけど、CSSファイルにコンパイルはしない」ということです。
どういうことかと言うと、自作のMixinとかを使うとき、1個のSassファイルにずらずらと書き込むよりも、ジャンル分けしていくつかのファイルに分割して書いて、それらをメインのSassファイルでインポートしたほうが気持ちいいんですよね。
でも、Sassってファイルをセーブするたびに指定のフォルダにCSSにコンパイルするでしょう?
Mixinとかすでにインポートして別にCSSにコンパイルする必要はないから、「インポートするけど、コンパイルはしたくない」のです!

Partialファイルの命名規則

_rest.scss
_base.scss

のようにSCSSファイルの先頭に _ を付け加えただけでPartialと見なします。

@import ルールでPartialをインポートするときに _ を取って記述します。

@import "base";
@import "partials/base";

本命の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/

Appearance
http://compass-style.org/reference/compass/css3/appearance/
Background Clip
http://compass-style.org/reference/compass/css3/background_clip/
Background Origin
http://compass-style.org/reference/compass/css3/background_origin/
Background Size
http://compass-style.org/reference/compass/css3/background_size/
Border Radius
http://compass-style.org/reference/compass/css3/border_radius/
Box
http://compass-style.org/reference/compass/css3/box/
Box Shadow
http://compass-style.org/reference/compass/css3/box_shadow/
Box Sizing
http://compass-style.org/reference/compass/css3/box_sizing/
CSS Regions
http://compass-style.org/reference/compass/css3/regions/
CSS3 Pie
http://compass-style.org/reference/compass/css3/pie/
Columns
http://compass-style.org/reference/compass/css3/columns/
Filter
http://compass-style.org/reference/compass/css3/filter/
Font Face
http://compass-style.org/reference/compass/css3/font_face/
Hyphenation
http://compass-style.org/reference/compass/css3/hyphenation/
Images
http://compass-style.org/reference/compass/css3/images/
Inline Block
http://compass-style.org/reference/compass/css3/inline_block/
Opacity
http://compass-style.org/reference/compass/css3/opacity/
Shared Utilities
http://compass-style.org/reference/compass/css3/shared/
Text Shadow
http://compass-style.org/reference/compass/css3/text-shadow/
Transform
http://compass-style.org/reference/compass/css3/transform/
Transition
http://compass-style.org/reference/compass/css3/transition/
User Interface
http://compass-style.org/reference/compass/css3/user_interface/

奥義!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/

ellipsis
http://compass-style.org/reference/compass/typography/text/ellipsis/
行末で文字がはみ出たら「..」を付けるあれ
horizontal-list
http://compass-style.org/reference/compass/utilities/lists/horizontal_list/
よくあるナビとかで、リストを横一行にするあれ
clearfix
http://compass-style.org/reference/compass/typography/lists/horizontal_list/
クロスブラウザのclearfix
inline-block
http://compass-style.org/reference/compass/css3/inline_block/
クロスブラウザのinline-block
link-colors
http://compass-style.org/reference/compass/typography/links/link_colors/
リンクの5つのステージの色をまとめて指定
replace-text
http://compass-style.org/reference/compass/typography/text/replacement/
SEOの関係で画像にテキストを入れたけど、テキストを見えなくする
Vertical Rhythm
http://compass-style.org/reference/compass/typography/vertical_rhythm/
Vertical Rhythmを利用したデザインパターンで自動的にline-heightとfont-sizeを計算する
Minimums
http://compass-style.org/reference/compass/utilities/general/min/
min-heightとmin-widthのクロスブラウザ対応

応用の巻

変数で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つ紹介します。

scss media queries by. 野中龍一 – GitHub
https://github.com/nonakaryuichi/scss_media_queries
_media-queries.scss by. anthonyshort – GitHub
https://gist.github.com/2028061

野中龍一さんの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:&#092;&#048;000385}}

Chrome

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

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

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を書きましょう!

カテゴリー : 生活・趣味 タグ :
LIGの記事一覧をみる ▶
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。

TOP