みなさん、楽しいSassライフを送っていますか？
「とりあえず.cssを.scssに変えて、ネストにしたりして使ってるよ！」という方、そろそろmixinを取り入れてみませんか？
Sassってなんでしょ？という方は、以前「Sass（SCSS）は難しくないよ！私なりの使い方をご紹介！」という記事を書いたので、ぜひそちらをお読み下さい。
Sass（SCSS）は難しくないよ！私なりの使い方をご紹介！
mixinとは？
スタイルを定義するのは通常のCSSと同じですが、使い回しを前提とした、JSで言うところの関数のようなものを作れるのがmixinです。
言葉だけではよくわかりませんね。mixinはこういう書き方をします。
hoge.scss の中身
/* @mixinで始まって半角スペース＋半角英数。.（ドット）や#（シャープ）はつけない */
@mixin myborder {
border-bottom: 1px solid #120e4d;
padding-bottom: 5px;
margin-bottom: 10px;
}
/* @include mixinの名前で呼び出し */
.hoge {
@include myborder;
}
.fuga {
@include myborder;
}
hoge.css （出力結果）
.hoge {
border-bottom: 1px solid #120e4d;
padding-bottom: 5px;
margin-bottom: 10px;
}
.hoge {
border-bottom: 1px solid #120e4d;
padding-bottom: 5px;
margin-bottom: 10px;
}
こんな感じで、1回mixinで置いておけば何度でも同じスタイルが使いまわせます。
・・・が、mixinの真骨頂はこんなところではありません！
mixinの便利なところは、「変数を使ったスタイルの定義ができる」ことです。
こちらも例文を用意しました。
hoge.scss
@mixin myborder( $color: #120e4d ) {
border-bottom: 1px solid $color;
padding-bottom: 5px;
margin-bottom: 10px;
}
.hoge {
@include myborder;
}
.fuga {
@include myborder( #f00 );
}
hoge.css （出力結果）
.hoge {
border-bottom: 1px solid #120e4d; /* 何も定義しなかったのでデフォルトの色のボーダーがつく */
padding-bottom: 5px;
margin-bottom: 10px;
}
.hoge {
border-bottom: 1px solid #f00; /* 定義した色でボーダーがつく */
padding-bottom: 5px;
margin-bottom: 10px;
}
mixinで大本を1箇所で管理しているので、後からmarginの値が変わった！という時も変更がお手軽ですね。
もちろん、変数はカンマ区切りで複数設定できます。
複数の変数を使う場合
@mixin myborder( $color: #120e4d, $width: 1px ) {
border-bottom: $width solid $color;
padding-bottom: 5px;
margin-bottom: 10px;
}
.hoge {
@include myborder;
}
.fuga {
@include myborder( #f00, 2px );
}
アイコンフォント用の共通スタイルを作るときや、リセット用のスタイルを作るときに便利ですね。
Bourbonとは？
前置きが長くなりましたが、ようやく今回の本題です。
A simple and lightweight mixin library for Sass.（シンプルで軽量なSassのmixin集）
BootstrapやPure.cssといったCSSフレームワークはHTMLに依存しますが、Bourbonは自分の好きなクラス名やID名に対してスタイルをつけられます。
なので、自分で作ったCSS設計だったり、SMACSSやFLOCSSといったCSS設計に沿えるのが魅力だなと思います。
Bourbonのインストール
Bourbonはどこかからダウンロードしてきて・・・というタイプのライブラリではありません。
gem でのインストールが必要になります。
私はNon-Rails の方法でインストールしました。
gemをインストールする
$ gem install bourbon
Bourbonを設置したいディレクトリに移動して、次のコマンドを叩く
$ bourbon install
コマンドを叩いたディレクトリにBourbonのファイル一式が入るので、プロジェクト内のSassファイルを管理しているフォルダに移動した方がよいですね。
Bourbonを使う
/* styles.scss 内で */ @import "bourbon/bourbon";
こんな感じでSassファイルにインポートさせます。
Bourbonはmixin集なので、インポートさせただけでは何も起こりません。ドキュメントを参考に使ってみましょう。
clearfix.scss
.hoge {
@include clearfix;
}
clearfix.css
.hoge {
clear: both;
content: "";
display: table;
}
※ドキュメントサンプルより
Sassファイル内でこう書くだけで、CSSにコンパイルしたときに.hogeに対してclearfixのスタイルが当たります。
今回はclearfixを例に持ってきましたが、アニメーションや、よくみるborderで三角形を出すmixinなんかも用意されているので、大変便利かと思います。
Bourbonに依存するフレームワーク
Bourbonを使っていることを前提としたフレームワークもあります。
Neat
Bourbonと同じく、HTMLに依存しないフレームワークです。
Neatはグリッドに特化したフレームワークです。細かいカラムの設定はもちろん、メディアクエリーもmixinとして用意されています。（Neatのメディアクエリーはモバイルファーストです）
Bitters
h1〜h6の見出しやpタグといったタイポグラフィ、ul / olタグ、各種フォーム用タグ、テーブルタグにスタイルを当てるフレームワークです。インポートさせるだけでタグにスタイルが付与されます。
Refills
Refillsは赤枠に含めませんでした。というのも、Refillsはフレームワークではなく、BourbonとNeatを組み合わせたらこんなことができるよ、というサンプル集のようなものだからです。
使い方に迷ったり、こんな使い方できるかな？というときに見てみるといいと思います。
まとめ
BourbonはHTMLに依存しないので「これを実現するためにはこのクラスを使って・・・」ということを考えなくていいので、個人的にはかなり楽ですね。
ドキュメントでそれっぽい単語（triangleなど）で検索すれば、スタイルが用意されているかどうかもわかりやすいです。
ただし、IE8以下は対応していないので、古いブラウザ対応が必要な場合は注意が必要（※）です。
※すでにIE8はどの機種でもサポートが終了しているので、よほどの理由がないかぎりは対応終了させていったほうがよいかと思います。