Twitter Bootstrap

Twitter Bootstrap、流行ってますねー。

Twitter Bootstrapとは、自分であんまりデザインをやりたくない人はこれを使えば、とりあえずレイアウトやボタンを整えてくれるっていう便利ツール。簡単にTwitterみたいなデザインを導入することが出来てしまいます。我々デザイナーにとっては、とりあえずではないちゃんとしたデザインをすることを仕事にしているので、Twitter Bootstrapは縁がないものかと思いきや、ちょっと触ってみたらこれはcssのフレームワークとして使うのにもなかなか便利だったのと、CSS拡張メタ言語（SASS、SCSS、LESSなど、CSSをもっと便利なものにしてくれる言語）の使い方を覚えるのにとてもいい教材だったので、KUROIGAMENでもTwitter Bootstrapを紹介してみたくなりました。

ただ、このTwitter BootstrapってLESSっていうCSS拡張メタ言語で書かれてるんですよね。僕の会社（フィヨルド）のサービスの怖話がRailsで出来てるってこともあって、SASSを使っていて（Rails3.1にsassが標準採用されています）、LESSの方は全然馴染みがないです。そのせいでTwitter Bootstrapに手を出さずにいたのですが、The Sass WayというSASS情報のブログでSass Twitter Bootstrapというプロジェクトの紹介を見つけて（http://thesassway.com/projects/sass-twitter-bootstrap）、よしSASSならば、と重い腰を上げてTwitter Bootstrapに手を出しました。ちなみにThe Sass WayはSASS情報の面白いブログなのでおすすめ。

Sass Twitter Bootstrap、SCSSだった

「では、早速リポジトリをクローン」、とSass Twitter BootstrapのリポジトリのGithubページに行ってみたら…あれ？

「Sass Twitter Bootstrap」ってSCSSじゃん！

SCSSとSASSの関係はHTMLとHAMLのようなもので、閉じカッコがなくてインデントで階層を書くというやつ。ややこしいことに、SCSSもSASSもSASSというRubyのgemをインストールすることで使えるようになります（Haml?インデント？と思った方はこちらの記事がおすすめ http://labs.unoh.net/2009/05/5haml.html）。僕は圧倒的にSCSSよりSASS派です。SASSの方が全然書く文字数が少なくて、一度SASSを使ってしまうとSCSSは書く気がしないです。これからSCSSをやってみようと思う方には僕個人としてはSASSをおすすめ。SCSSは、基本的な書き方はCSSと同じで、それに機能が追加されてる感じなので、SASSファイルだけど中身はSASSの機能を使っていない単なるCSSでも問題ないので、SCSSを覚えながら徐々にCSSに機能を追加していける、っていうメリットがあるかなー。

さて、話は戻ってSass Twitter Bootstrapですが、仕方ない、SCSSをSASSにしてやろうとGithubの「Sass Twitter Bootstrap」をフォークしてSASS版を公開することにしました（とは言っても、SCSSからSASSにコンバートする機能はSASS自体に用意されているのでそのコマンドを打つだけだったけど…）。

Sass Twitter Bootstrapをローカルにgit clone

KUROIGAMENでは何度もやってきているおなじみのコマンド「git clone」から今回もスタートです。Sass Twitter BootstrapのリポジトリはGithubで公開されています（https://github.com/jlong/sass-twitter-bootstrap）。Sass Twitter Bootstrapは本家のTwitter Bootstrapからフォークされたものですね。

まずは、自分のマシンのSass Twitter Bootstrapを置きたい適当なディレクトリに移動します。僕の場合はユーザーの下の「サイト」っていうディレクトリに置きました。

$ cd Site

「サイト」に移動したので、ここでクローン。

$ git clone https://github.com/jlong/sass-twitter-bootstrap.git

これでクローンは完了。

中身を見てみる

さてさて、クローンをしたSass Twitter Bootstrapの中身をざーっと見てみますか。

「lib」ってディレクトリにこれからSASSにコンバートする元のSCSSが入ってます。「examples」のディレクトリにTwitter Bootstrapを使ったサイトデザインの例、「docs」はTwitter Bootstrapの説明、「bootstrap-1.3.0.css」と「bootstrap-1.3.0.min.css」がSCSSから生成されたCSSファイルです。

.rvmrc

「.rvmrc」というファイルは、中身を見てみると、

rvm ruby-1.9.2@twitter-bootstrap --create

と書いてあります。

rvm ruby-1.9.2

ここの部分は、今回クローンしたディレクトリに移動をすると勝手にrvmで使うRubyを「ruby-1.9.2」にしてくれるっていう設定。 この後ろにある

@twitter-bootstrap --create

は、rvmで勝手に使うgemsetを「twitter-bootstrap」にしてくれて、もしそれが無かったら作った上で選択してくれるっていう設定。rvmがオワコンって噂があるけど、やっぱり便利だよなー。

Gemfile

「Gemfile」は、中身を見てみると、

source :rubygems

gem 'rake'
gem 'sass'
gem 'rb-fsevent'

と、書いてありますが、これからいつもやってるbundlerを使ってガーっとgemsetに入れるGemのリストです。「Gemfile」でbundle installで入れるものを設定してるんですね。

環境構築

ではでは、Sass Twitter Bootstrapを使う環境構築。

まずは、bundlerで必要なgemを「.rvmrc」の設定で作ってくれたgemset「twitter-bootstrap」にガーっと入れる作業。

おっと、ここでエラー。肝心のgem、bundlerがgemset「twitter-bootstrap」に入ってなかったのでbundleが出来なかった。bundlerはいつも使うgemなので、毎回作ったgemsetに入れるのは面倒。なので、「bundler」は「global」というgemsetに入れてしまいます。「global」というgemsetは、他のgemsetを使っている場合でも、「global」の中のgemも使ってくれるというgemsetです。ここに「bundler」を入れてしまえば、今後どのgemsetを使っても「bundler」を入れる必要はなくなります。ただ、globalは使うrubyのバージョンごとにあるので、今回は1.9.2を使っていますが、例えば1.8.7を使うときは、1.8.7の「global」にも「bundler」を入れないといけないです。

gemsetを「global」に切り替えて、

rvm gemset use global

「bundler」をインストール。

gem install bundler

gemset「global」に「bundler」が入ったので、gemset「twitter-bootstrap」に戻ります。

rvm gemset use twitter-bootstrap

ちなみに、

rvm gemset list

で、今あるgemsetの一覧と今使っているgemsetがわかります。

では、gemをガーっと入れましょう。

bundle install

これだけでもOK。

bundle

SCSSをSASSにコンバート

やっと本題です。SCSSで作られたSass Twitter BootstrapをSASSに変換します。それにしても、なんでScss Twitter Bootstrapって名前じゃないんだろう？

変換の作業はコマンドを一発入力するだけ。

そのコマンドは http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html に書いてありました。

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

なるほど、sass-convertってコマンドだけでいいみたい。そのコマンドの引数に「変換前」、「変換後」を渡すだけ。

これから変換するscssファイルはディレクトリ「lib」の中に入ってるので、まずはそこに移動。

$ cd lib

まずは試しに「bootstrap.scss」を「bootstrap.sass」に変換するって作業をやってみます。

$ sass-convert bootstrap.scss bootstrap.sass

打ったら…無反応。

lsコマンドでlibの中のファイルを確認。

$ ls

黒い画面（ターミナル）では無反応でしたが、「bootstrap.sass」が出来てました！

では、残りのファイルも変換してみます。

$ sass-convert forms.scss forms.sass

$ sass-convert mixins.scss mixins.sass

$ sass-convert patterns.scss patterns.sass

$ sass-convert reset.scss reset.sass

$ sass-convert scaffolding.scss scaffolding.sass

$ sass-convert tables.scss tables.sass

$ sass-convert type.scss type.sass

$ sass-convert variables.scss variables.sass

これ、一発で変換する方法ってないのかなぁ？一個一個コマンドを入力するのが死ぬほど面倒。探しても見つからなかったんですが、もし知っている方がいましたら教えていただきたいです。

これで変換は完了。

ディレクトリ「lib」の中のscssはもう使わないので削除してしまいましょう。

SASSがちゃんと使えてるか確認

ファイルの変換は終わったのですが、一部ファイルの中身も書き換える必要があります。続いてその作業へ。

まずは、ディレクトリ「lib」の中にある「bootstrap.sass」から。ファイルを開きます。

/*!
 * Bootstrap v1.3.0
 *
 * Copyright 2011 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 *
 * Converted to Sass by @johnwlong.
 *
 * Date: @DATE

// CSS Reset
@import reset.scss

// Core
@import variables.scss
@import mixins.scss

// Grid system and page structure
@import scaffolding.scss

// Styled patterns and elements
@import type.scss
@import forms.scss
@import tables.scss
@import patterns.scss

ソースを見れば一目瞭然なんですが、「bootstrap.sass」は、「lib」の中にあるsassファイルを読み込んでるだけのファイルですね。今回はscssをsassに変えたので、このソースの中で指定されている呼び出すファイルの拡張子をscssからsassに変える必要があります。ということで「scss」を「sass」に一括置換。

/*!
 * Bootstrap v1.3.0
 *
 * Copyright 2011 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 *
 * Converted to Sass by @johnwlong.
 *
 * Date: @DATE

// CSS Reset
@import reset.sass

// Core
@import variables.sass
@import mixins.sass

// Grid system and page structure
@import scaffolding.sass

// Styled patterns and elements
@import type.sass
@import forms.sass
@import tables.sass
@import patterns.sass

ちなみに、Converted to Sass by @johnwlong.とありますが、この@johnwlongさんはRubyをやってる人ならおなじみの、

などのデザインや中身を作ってる方みたいです。

続いて、libからひとつ上の階層、Sass Twitter Bootstrapのトップディレクトリに戻って、この階層にある「Rakefile」を開きます。「Rakefile」には、「rake」というコマンドを打つだけで、scssファイルから「bootstrap-1.3.0.css」と「bootstrap-1.3.0.min.css」を生成するという命令が書かれています。scssファイルから「bootstrap-1.3.0.css」と「bootstrap-1.3.0.min.css」を生成する、という命令を、sassファイルから「bootstrap-1.3.0.css」と「bootstrap-1.3.0.min.css」を生成する、書き換える必要があります。まぁ、何も考えずにscssをsassに一括置換。

では、rakeコマンドを打ってみましょう。

$ rake

ここでエラーが！

(in /Users/machida/Sites/sass-twitter-bootstrap)
sass --load-path lib --style expanded lib/bootstrap.sass:bootstrap-1.3.0.css
WARNING on line 384 of lib/patterns.sass:
This selector doesn't have any properties and will not be rendered.
Syntax error: Invalid CSS after "": expected expression (e.g. 1px, bold), was ".btn"
        on line 508 of lib/patterns.sass
        from line 28 of lib/bootstrap.sass
  Use --trace for backtrace.
rake aborted!
Command failed with status (1): [sass --load-path lib --style expanded lib/...]

Tasks: TOP => default => build => bootstrap-1.3.0.css
(See full trace by running task with --trace)

どうやらこのエラーはrakeのファイルがおかしいのではなく、sassのファイルに書き間違えがあって、cssを生成するのを失敗した、っていうエラーっぽいですね。

エラーメッセージに注目。

Syntax error: Invalid CSS after "": expected expression (e.g. 1px, bold), was ".btn"
        on line 508 of lib/patterns.sass

「patterns.sass」の508行目近辺を見てみます。

// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons

\:root .alert-message,
:root .btn
  border-radius: 0 \0

コメントを読んでみると、IE9ハックでIE9の場合は角丸を外して、グラデーションをキープしているみたいですね。うーん、IE9なんて知ったこっちゃないよ、という感じですが、修正は「\:root」の「\」を削除するだけなのでIE9にも対応しておきますか。この削除したエラーの原因である「\」、元のscssを見たらそんなの書いてないんですよね。多分、これはscssからsassにコンバートしたときに勝手に付いてしまったバグ。

// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons

:root .alert-message,
:root .btn
  border-radius: 0 \0

では、もう一度「rake」コマンドを打ちます。

$ rake

今度はエラーが出ませんでした。

(in /Users/machida/Sites/sass-twitter-bootstrap)
sass --load-path lib --style expanded lib/bootstrap.sass:bootstrap-1.3.0.css
sass --load-path lib --style compressed lib/bootstrap.sass:bootstrap-1.3.0.min.css

ではでは、rakeで生成された「bootstrap-1.3.0.css」と「bootstrap-1.3.0.min.css」を見てみましょう。ここにちゃんとcssが書かれていたら完成です。

出来てた！

次回は中身に気に食わないところがあったので修正に挑戦をしてみます。その前にSASSの使い方やTwitter Bootstrapの中身の説明もしなくては…。

そうそう、今回のSASS版Twitter Bootstrapはこちらに置いてあります。

• sass
• Twitter Bootstrap