はじめに

やあ（´・ω・｀)

今回Bourbon（バーボン）というcssフレームワークを初めて触ってみました。特長やら何やらをざっとまとめてみましたので、興味のある方の参考にでもなれば幸いです。

なお説明はすべてバージョン4.2.4を想定しています（2015/08/31最新）

Bourbon（バーボン）とは

sass用のmixin/functionsをまとめたcssのフレームワークです。基本@includeやfuncName()のように使うので、htmlに依存しません。まぁcompassと同じようなものかと思います。

公式サイト
http://bourbon.io/

特長

軽量でシンプル
Neat, Bittersといったcssフレームワークの基になる
コンポーネントやモジュールといった複数のタグやプロパティを組み合わせて使用するようなものはない

Bourbonに依存するフレームワークの紹介

Neat

グリッドシステムを提供するcssフレームワーク。Bourbonと同じように基本@includeとして使うので、htmlに依存しません。

現在のバージョン4.2.4では、Bourbon単体でもグリッドシステムを利用できるfunctionsもありますが、次回メジャーアップ時に削除され、Neatを使うよう推奨されています。

Bitters

タイポグラフィ、リスト、テーブル、フォームといったベーススタイルを提供するcssフレームワーク。normalize.cssを少し拡張したようなものでしょうか。同じくhtmlに依存しません。

Refills

こちらはフレームワークではなく、BourbonとNeatを使ってこんな感じに書くとこういったものができるよ、というコンポーネントやパターンなどを説明したスタイルガイド・カタログのようなものです。

機能の紹介

Bourbonは、大きく分けてMixin, Functions, Add-onの3種類の機能を提供します。それぞれ概要と個人的によく使いそうなものをピックアップしてみます。あまり数は多くないので、詳細は公式ドキュメントを見ていただければと思います。

Mixin

主にベンダープレフィックスの追加を行ないます。@include NAME()とするだけで、-webkit-やら-moz-やらプレフィックスをプロパティに付与してくれます。プレフィックス自体の制御は以下のように設定できます。

global-prefix.scss

$prefix-for-webkit:    true;
$prefix-for-mozilla:   true;
$prefix-for-microsoft: true;
$prefix-for-opera:     true;
$prefix-for-spec:      true;

よく使いそうなもの

Animation
Flexbox
Font Face
Keyframes
Linear Gradient
Transform, Transition

Functions

主にコンバートや変換などを処理します。グリッドシステムはNeatへ移動するため、個人的には多用することは少ないかもしれません。ただ色の変更は使いそうなので、メモしておきます。

tint(COLOR, 0%): %分の白を加える
shade(COLOR, 0%): %分の黒を加える

sassのlighten() / darken() は明度を調整するのに対して、tint() / shade()は白黒を混ぜて色を調整します。参考として画像を作成してみました。

Add-on

色々とショートハンドな書き方をすることができます。個人的にはこれが一番うれしいです。無理やり分類すると以下のようなことができます。

borderやmargin、positionなどの細かい制御を一行で書ける
よく使うスタイルを一行で書ける
複雑なeasingを簡単に書ける
プレフィックスの細かい制御
inputタグの属性一括指定

borderやmargin、positionなどの細かい制御を一行で書ける
何と言っても特定の値を無視するnullが良いです。従来のような「この値だけは上書きしたくないからショートハンドは使えないなぁ」ということが避けられます。

@include border-color(red green null blue);
  // border-top-color: red;,
  // border-right-color: green;
  // border-left-color: blue;

@include margin(null 10px 3em 20vh);
  // margin-right: 10px;
  // margin-bottom: 3em;
  // margin-left: 20vh;

@include position(relative, 0 null null 10em);
  // position: relative;
  // top: 0;
  // left: 10em;

よく使うスタイルを一行で書ける

// clearfix
@include clearfix;

// hide text(画像置換)
@include hide-text;
background-image: url(logo.png);

// retina対応
@include retina-image(home-icon, 32px 20px);

// size(width,heightを一度で指定)
@include size(2em); // width: 2em; height: 2em;

// 三角形の作成
@include triangle(12px 6px, gray lavender, up-left);

複雑なeasingを簡単に書ける
jQuery UIのeasing functionsと同じ動きを、cssの3次ベジェ曲線（cubic-bezier()）を使って再現してくれます。

@include transition(all 5s $ease-in-circ);
  // -webkit-transition: all 5s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  // -moz-transition: all 5s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  // transition: all 5s cubic-bezier(0.6, 0.04, 0.98, 0.335);

プレフィックスの細かい制御

@mixin box-sizing($box) {
  @include prefixer(box-sizing, $box, webkit moz spec);
}

inputタグの属性一括指定

#{$all-text-inputs} {}
#{$all-text-inputs-focus} {}
#{$all-text-inputs-hover} {}
#{$all-text-inputs-active} {}

/*
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
...
input[type="color"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
...
input[type="color"]:hover,
input[type="date"]:hover,
input[type="datetime"]:hover,
input[type="datetime-local"]:hover,
...
*/

使い方

単純に使う場合は、インストール（ファイルをダウンロード）してきて、app/assets/stylesheets/内を作業ディレクトリに置き、.scss内に@import "{PATH}/bourbon";を記述した上でコンパイルすればOKです。

gulpを使う場合

gulp-sassを使う場合は、node-bourbon, node-neatを利用します
gulp-ruby-sassを使う場合は、オプションでbourbon, nestを指定するとよいそうです（未確認）

参考
http://dev.classmethod.jp/client-side/javascript/gulp-solo-adv-cal-09/

おわりに

htmlに依存しないという点でも、思ったより学習コストは低そうです。今まで私がcssフレームワークを採用する時は、デザイン性を重視しない（orスピード重視）の場合はBootstrap、それ以外はCompassという使い分けをしてきましたが、これからはBourbon/Neat/Bittersを基に、ガシガシとコードを書いていくのも選択肢として取り入れてみようかなと思いました。

        ∧_∧
        (`･ω･) ｼｭｯ
        (つ と彡 /
          ／   /
        ／    /
      ／ //  /
    ／ 旦   / ﾂﾂｰ
  ／       /

CSSフレームワークBourbon超速入門