読者です 読者をやめる 読者になる 読者になる

my coredump

自分用の公開メモです。主にプログラムのこととか書くはず。

Sass/ScssフレームワークBourbon使ってみた

要約

BourbonたちはしっかりHTML/CSS書きたいとき向け。
CSSの習熟度によって感想変わりそうではある)

きっかけ

以下の記事をみてSass/ScssのフレームワークであるBourbonとその仲間たちを知った。

CSSフレームワークBourbon/Neat/Bitters/Refillsは美しい

CSSフレームワークといえばBootstrap便利でよく使ってるんだけど、記事でも言われているようにクソマークアップ問題は感じている。
そこで代替としてBourbonファミリーはどんなもんか自分でも触ってみた。

色々試した結果
akiyoshi83/ex_bourbon · GitHub

Bourbonとその仲間たちの現時点での認識は以下の様な感じ。

お試しプロジェクト用意

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をセットアップ

参考 http://bourbon.io/

とはいっても app/assets/stylesheets/application.cssapp/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をメンテしていく時にはもっと明確にメリットが出るかもしれない。その辺はもっと使い込んでみないとハッキリ言えないけど。