#330 Better Sass with Bourbon

CSSのプロパティを個別のブラウザごとに指定することにうんざりしている方に、SASSのmixinと関数でCSSに対する作業を楽にしてくれるBourbonライブラリをお勧めします。今回のエピソードではこれをRailsアプリケーションで使う方法を説明します。

RailsアプリケーションにBourbonを追加する

下の図は今回の対象のアプリケーションです。デザインに少し手を加える必要があるので、アプリケーションにBourbonを追加し、その機能のいくつかを使ってページの見栄えを改善します。

Bourbonのインストールは簡単です。gemfileにgemを追加してbundleコマンドを実行するだけです。

source 'https://rubygems.org'

gem 'rails', '3.2.2'

# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'

gem 'sqlite3'


# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'

  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
  # gem 'therubyracer'

  gem 'uglifier', '>= 1.0.3'
end

gem 'jquery-rails'
gem 'bourbon'

Railsのasset pipelineでBourbonを使うために、デフォルトのapplication.cssファイルの動作を変更します。このファイルはデフォルトではSprockets manifestを使って、その他のスタイルシートのassetをロードします。この方法の問題は、SprocketsがそれぞれのSASSファイルを個別にCSSにコンパイルするので、SASSファイル間でBourbon mixinを共有することが難しくなることです。これを解決するために、Sprocketsの代わりにSASSを使ってすべてのscssファイルをロードします。

application.cssファイルの名称をapplication.css.scssに変更して、Sprockets manifestを削除し、SASSの@importコマンドでインクルードしたいファイルを集めます。とりあえず今はgemに含まれるbourbonファイルだけをインクルードします。

@import "bourbon";

これらの変更を有効化するためにサーバを再起動します。再起動後にページをリロードすると、スタイル情報がなくなっています。

ブラウザで/assets/application.cssファイルを見ると、中身は空です。Bourbonはそれ自身がアプリケーションにCSSを追加するのではなく、SASSを介してより簡単にCSSを追加できるようにしてくれます。アプリケーションに必要なCSSはあくまでも自分で書かなくてはいけないので、layoutとprojectのファイルをapplication.css.scssに戻します。これらのCSSファイルをすでに設定してありましたが、これによってその中でBourbonを使用できるようになりました。

@import "bourbon";
@import "layout";
@import "projects";

ページをリロードすると、以前のデザインが戻りました。

ヘッダを修正する

デザインの修正でまず最初におこなうのは、フォントの変更です。現在このページではブラウザのデフォルトフォントが使用されていて、通常はTimes New Romanになります。Bourbonにはfont-family add-onが含まれていて、フォントのタイプを設定するためのいくつかの変数を利用できます。これらの中には、最初に要求したフォントがない場合に使用するためのfallback用のフォントも含まれています。これを使ってbody部分のフォントを設定します。

body {
  margin: 0;
  padding: 0;
  background-color: #FFF;
  font-size: 14px;
  font-family: $verdana;
}

次にヘッダにグラデーションを追加します。Bourbonにはlinear-gradientモジュールがあり、これを使ってグラデーションを追加して色を指定します。薄い灰色から濃い灰色に変化するグラデーションを追加します。グラデーションの方向が指定されていないことに注目してください。これによってデフォルト値のtopが使用されます。

#header {
  color: #FFF;
  padding: 15px 100px;
  font-size: 30px;
  font-weight: bold;
  @include linear-gradient(#777, #444);
}

デフォルトの背景色はlinear-gradientに含まれているので、ヘッダのbackground-colorプロパティを削除しました。ヘッダの下に影も付けたいので、Bourbonのmixinを使ってこれを追加します。同じようにCSS3プロパティのbox-shadowでこれを使えますが、mixinが自動的に各ブラウザ用のprefixを生成してくれます。黒色の影をオフセットなしで、ぼかしを6ピクセル、広がりを3ピクセルに設定します。

#header {
  background-color: #555;
  color: #FFF;
  padding: 15px 100px;
  font-size: 30px;
  font-weight: bold;
  @include linear-gradient(#777, #444);
  @include box-shadow(0 0 6px 3px #000);
}

ページをリロードすると、変更を確認できます。

項目リストを修正する

次に項目リストを修正します。最初に各プロジェクトを囲んでいるボックスの角を丸くします。当然Bourbonもborder-radiusモジュールを使ってこれを指定できます。プロジェクト固有のスタイル情報はprojects.css.scssファイルにあるので、そこに6ピクセルのradiusを追加する変更をおこないます。

.project {
  border: solid 1px #AAA;
  margin: 20px 0;
  padding: 7px 12px;
  @include border-radius(6px);
  
  &:hover { background-color: #F8FCCF; }
  
  h2 {
    margin: 0;
    a { text-decoration: none; }
  }
}

次に、hover時に各項目の背景色が変わる効果を変更します。色がすぐに変わるのではなくフェードするように設定します。それにはtransitionを使用し、変更したい属性(今回は変化にかける時間と視覚効果)を指定します。

.project {
  border: solid 1px #AAA;
  margin: 20px 0;
  padding: 7px 12px;
  @include border-radius(6px);
  @include transition(all, 500ms, ease-in-out);
  
  &:hover { background-color: #F8FCCF; }
  
  h2 {
    margin: 0;
    a { text-decoration: none; }
  }
}

これでプロジェクトの上をhoverすると背景色は0.5秒かけて色が変わり、カーソルが離れる時にも同じ時間で元に戻ります。

このページにおこなう最後の変更として、“New Project”のリンクを改善します。もっとボタンらしい見た目にしたいので、Bourbonのbuttons add-onを使ってボタンのスタイルを変更します。このリンクにはnew_projectクラスが設定されているので、これを使ってスタイルを指定してシンプルな緑色のボタンに変更します。

.new_project {
  @include button(simple, #3FB344); 
}

ページをリロードすると、スタイルが設定された角丸のリンクが表示されます。

ボタンはアンカータグから下線などいくつかの属性を継承していますが、大きさを少し大きくしたいと思います。これをおこなうために更にCSSを追加します。

.new_project {
  @include button(simple, #3FB344); 
  text-decoration: none;
  font-size: 16px;
}

新規プロジェクトを追加するためのきれいなボタンができました。

Bourbonが生成するCSSの実例

ページがきれいになったので、ここでBourbonが生成したCSSを見てみましょう。数が多くすべてを見せることはできないので、ここではサンプルとしてヘッダ用に生成されたCSSを見てみると、グラデーションを追加した部分のコードを確認することができます。

#header {
  background-color: #555;
  color: #FFF;
  padding: 15px 100px;
  font-size: 30px;
  font-weight: bold;
  background-color: #777777;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #777777), color-stop(100%, #444444));
  background-image: -webkit-linear-gradient(top, #777777, #444444);
  background-image: -moz-linear-gradient(top, #777777, #444444);
  background-image: -ms-linear-gradient(top, #777777, #444444);
  background-image: -o-linear-gradient(top, #777777, #444444);
  background-image: linear-gradient(top, #777777, #444444);
  -webkit-box-shadow: 0 0 6px 3px black;
  -moz-box-shadow: 0 0 6px 3px black;
  box-shadow: 0 0 6px 3px black;
}

ここには、Bourbonを使ったことによって手で書かずに済んだコードが多く含まれています。

SASSにも、色の変化、種類、調整に関連するCSSを生成ときに便利な関数がいくつかあります。SASSだけでできることについてはエピソード268にさらに情報があります。