Sass/ScssフレームワークBourbon使ってみた
要約
BourbonたちはしっかりHTML/CSS書きたいとき向け。
（CSSの習熟度によって感想変わりそうではある）
きっかけ
以下の記事をみてSass/ScssのフレームワークであるBourbonとその仲間たちを知った。
CSSフレームワークBourbon/Neat/Bitters/Refillsは美しい
CSSフレームワークといえばBootstrap便利でよく使ってるんだけど、記事でも言われているようにクソマークアップ問題は感じている。
そこで代替としてBourbonファミリーはどんなもんか自分でも触ってみた。
色々試した結果
akiyoshi83/ex_bourbon · GitHub
Bourbonとその仲間たちの現時点での認識は以下の様な感じ。
- Bourbon
SCSSのMixin集(like Compass) - Neat
Bourbonを利用したGridフレームワーク - Bitters
Bourbonを利用したコンポーネント集(like Bootstrap?) - Refills
Bourbon, Neatのサンプル、スニペット集
お試しプロジェクト用意
Railsで試してみる。
$ rails new -B -T ex_bourbon $ cd ex_bourbon
Gemfileに追加してインストール。
$ ehoc ‘gem “neat”’ >> Gemfile $ ehoc ‘gem “bitters”’ >> Gemfile $ ehoc ‘gem “refills”’ >> Gemfile $ bin/bundle install —path vendor/bundle
Bourbon自体はNeat, Bitters, Refillsがそれぞれ依存しているので勝手に入ってくる。
$ echo ‘/vendor/bundle’ >> .gitignore $ git init $ git add . $ git ci -m “First commit"
お試し用のページを用意。
$ bin/rails g controller home index $ git add . $ git ci -m "Add home/index and set root path"
Bourbonをセットアップ
とはいっても
app/assets/stylesheets/application.cssを
app/assets/stylesheets/application.scssにリネームして
既存の内容を全て消してからその中に@importを記述するだけ。
@import ‘bourbon’;
Railsでない場合は以下のコマンドを打つとカレントディレクトリにbourbonディレクトリが出来る。
$ bundle exec bourbon install
※—pathオプションで配置場所を変更できる。
Neatをセットアップ
参考 https://github.com/thoughtbot/neat#requirements
これもBourbonと同じ要領。
ただし@importはBourbonのよりあとに書く。
Rails以外ではコマンドでセットアップする必要があるのも同じ。
Bittersをセットアップ
参考 https://github.com/thoughtbot/bitters#installation
これはRailsでもコマンドでセットアップが必要。
$ (cd app/assets/stylesheets/; ../../../bin/bundle exec bitters install)
以下のようになる。
$ tree app/assets/stylesheets/
app/assets/stylesheets/
├── application.css
└── base
├── _base.scss
├── _buttons.scss
├── _forms.scss
├── _grid-settings.scss
├── _lists.scss
├── _tables.scss
├── _typography.scss
└── _variables.scss
そしてBourbonのあとに@importする。
Neatも併用する場合はNeatをBittersのあとに@importする。
@import 'bourbon'; @import 'bitters'; @import 'neat';
それとbase/_base.scssの@import “grid-settings”;をコメントインする必要があるらしい。
手元では簡単なグリッドはコメントインしなくても動いたけど必要なのかな？
他にもやりたいことによって@importのパスを変えたり色々変える必要があるらしけどとりあえずこの設定で試す。
あとはこれで普通にHTML書いていくとある程度のスタイルがBittersによってあたっているし（最小限っぽいけど）、グリッドもSCSS側で書けば簡単に実装できる。
またBittersが生成するSCSSは8つあるけどどれも100行未満で簡単に読めてカスタマイズも容易そう、かつSass/Scssビギナーには参考になる気がする。
Refillsをセットアップ
参考 https://github.com/thoughtbot/refills#installation
以下のコマンドで試用できるスニペット一覧が表示される。
$ bin/rails g refills:list Available Refills ================= - accordion-tabs-minimal - accordion-tabs - accordion - animate-info - animate - badges - breadcrumbs - button-group - cards - centered-navigation - comment - device - dropdown - expander - fade-in - flashes - flex-boxes - footer-2 - footer - grid-items-lines - grid-items - hero - hover-tile-animation - icon-bullet-points - image-gradient-dynamic - maps - modal - navigation - pagination - parallax - progress-bar-indication - progress-bar - ribbon - scroll-on-page - search-bar - search-tools - side-image - sliding-menu - stats - switch - tables-minimal - tables - texture-legend - textures - tooltip - type-system-geometric - type-system-rounded - type-system-sans - type-system-serif - type-system-slab - type-system-traditional - vertical-tabs - video
スニペットのインストールは
$ bin/rails generate refills:import SNIPPET
スクリプトをCoffeeScriptで欲しい時は以下。
$ bin/rails generate refills:import SNIPPET --coffee
スニペットは1つずつ指定してインストールするらしい。 単純そうなfooterをインストールしてみる。
$ bin/rails g refills:import footer --coffee
create app/views/refills/_footer.html.erb
create app/assets/stylesheets/refills/_footer.scss
うーん、ほんとサンプルコードが生成されます、ッて感じで、あんまり使い勝手良くないかも。 あくまで参考にする程度か。
感想
Bootstrapみたいにclassを書くだけで劇的にスタイリングが楽になるようなものではない。あくまでスタイルはガシガシ書く必要がある。
ただもちろんブラウザごとの書き方の違いは吸収してくれるし、HTMLに謎のclassが散りばめられることはなくなる。 Bootstrapもちゃんと使うとスタイルの上書きやなんやらで結構ガシガシ書くし、余計なことを気にせずマークアップを正しく書いて見た目はCSSでっていう成功法で実装するには都合が良さそう。
使い捨ての社内ツールやプロトタイプでプログラマが手っ取り早く見た目を整えたいって場合は相変わらずBootstrapは有力な選択肢。
あとCompassもそうだけどBourbonが用意してくれるmixinは結構マニアックなプロパティに関するものもあるので、そもそもCSSにちゃんと詳しくないと使い方が分からないであろうものも結構ある。 そういう場合もBootstrapで充分かも。
BourbonらはあくまでHTML/CSSをちゃんと書きたい人向けのツールだと思った。
とはいえ今後自分が作るツールとかにBourbon使わずBootstrap使うかといえば微妙で、できれば簡単なものでもBourbon使っていきたい。 自分の場合、そもそも簡単なものならBootstrapすら使わず最低限のCSSとJSで済ませてしまうことも多いので。 どうせBootstrap使わないならブラウザ間の違いも吸収してくれるしSCSSもっと使いこなせるようになりたいしBourbon使ったほうが良い気がする。
でどうせならNeatのグリッドシステムあれば便利だしBittersでタイポグラフィとかあたってくれるとまあこれでいいかってなるのでそれも使いそう。 ただテーブルとか変更したいものもあるけどカスタマイズも容易そうなので。Refillsは参考程度かな…
まあ自分の選択のレベルだと好みで良いかなってレベルだけど。 長期的にHTML/CSSをメンテしていく時にはもっと明確にメリットが出るかもしれない。その辺はもっと使い込んでみないとハッキリ言えないけど。
