ProgrammingHTML/CSS過去記事
過去記事

Bourbonについて

Bourbon（バーボン）の概要

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

BourbonはSass(SCSS)用としてMixin、Functions、Add-on機能を提供するフレームワークです。
Bootstrapのようにあらかじめ定義したクラスを提供するのではなく、CSSの記述を楽にするための機能を提供します。
例えば、transitionのcubic-bezierは数値でアニメーション処理を設定しますが、 Bourbonはアニメーション名で設定することができます。

CSSで通常通りに指定
-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を使って指定
@include transition(all 5s $ease-in-circ);

Bourbonにはベンダープレフィックス用のMixinも用意されていますが、ベンダープレフィックスの制御はAutoprefixerを使ったほうが良いでしょう。Functions、Add-onといった便利な機能もありますが、なくてもそれほど困らないため、Bourbonは極力使わず、必要になった際に読み込むようにするという考え方もあります。

ただし、Bourbonには自身が提供する機能以外に、別途追加読み込みすることで利用できるフレームワークが用意されています。
グリッドシステムを提供するNeatや、ベーススタイルを提供するBittersといったものがあり、これらを利用する際はBourbonの読み込みが必要になります。

インストールと使い方

Preprosなどのツールをインストールしている場合、一緒にインストールされていることもありますが、単体でインストールすることもできます。
まずは、コマンドプロンプトを立ち上げて、Bourbonがインストールされている確認します。

bourbon -v

インストールされいない場合は、下記コマンドでインストールします（Rubyがインストールされている必要があります）。

gem install bourbon

各プロジェクトごとにBourbon関連ファイル用のディレクトリを用意する必要があります。
SASSファイルがあるディレクトリに移動して、下記コマンドでBourbon関連ファイルを作成します。

cd ****
bourbon install

上記コマンドを実行したディレクトリにBourbonディレクトリ（bourbon/）が作成されていればインストール成功です。
この場合はSASSから下記のようにBourbonを読み込みます。

@import "bourbon/bourbon";

Prepros付属のBourbonはパスが通っているので、SASSディレクトリにインスト―ルする必要もなく、下記1行を加えるだけで読み込みできます。

@import "bourbon";

SASSファイルの監視

SASSファイルはCSSファイルに変換が必要ですが、下記コマンドを使って更新があれば自動的にCSSに変換するよう監視することができます。

sass --watch [監視したいディレクトリ]

Preprosなどのツールを使って監視している場合はこのコマンドは不要です。

Bourbonの更新

下記コマンドで最新のBourbonにアップデートできます。

bourbon update

Bourbonの使い方

Sassファイルの上部で下記のように読み込みます。

@import "bourbon";

それ以降の行で、Mixin、Functions、Add-onといった機能が利用可能になります。
詳しい使い方は下記を参照してください。

http://bourbon.io/docs/

Neat

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

Sassを使ってグリッドレイアウトを簡単に実現するためのフレームワークです。
モバイルファーストのメディアクエリーもMIXINとして用意しています。

Bourbon単体でもグリッドシステムを利用できるFunctionが用意されていますが、次回メジャーアップ時に削除される予定で、Neatを使うよう推奨されています。

インストール

コマンドプロンプトを立ち上げて、Neatがインストールされている確認します。

bitters -v

インストールされいない場合は、下記コマンドでインストールします（Rubyがインストールされている必要があります）。

gem install neat

各プロジェクトごとにライブラリをインストールする必要があります。
SASSファイルがあるディレクトリに移動して、ライブラリのインストールを行ってください。

cd ****
neat install

あとはSASSファイルに、下記を追加して Neat を読み込みます。

@import "neat";

Bitters

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

normalize.cssのようなもので、ブラウザ間の差異をなくし、CSSのデフォルトスタイルを定義します。

インストール

コマンドプロンプトを立ち上げて、Bittersがインストールされている確認します。

bitters -v

インストールされいない場合は、下記コマンドでインストールします（Rubyがインストールされている必要があります）。

gem install bitters

各プロジェクトごとにライブラリをインストールする必要があります。
SASSファイルがあるディレクトリに移動して、ライブラリのインストールを行ってください。

cd ****
bitters install

上記コマンドを実行したディレクトリにBittersディレクトリ（base/）が作成されていればインストール成功です。

あとはSASSファイルに、下記を追加します。

@import "bourbon";
@import "base/base";

Bourbon を読み込んだ後、Bitters のライブラリを読み込んでいます。

EXAMPLE
http://bitters.bourbon.io/example.html

Refills

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

Refillsはフレームワークではなく、BourbonとNeatを使ったサンプル、スニペット集です。
HTMLとSCSSのソースが提供されているので、簡単に流用することが可能です。

関連記事