自分用Webアプリケーション雛形(slim + sass + coffeescript + compass)

id:naoya さんの昨今の自分用Webアプリケーションひな形の記事で紹介されてた雛形をちょっと使ってみたら静的ページ作成が爆速になって感動した。ただ、cssがsassだけだったので、より自分に合うようにcompass使えるように変更した。

• https://github.com/yasuharu519/boilerplate

id:naoya さんの元のレポジトリはこちら

• https://github.com/naoya/boilerplate

bower, sinatraなどの解説については、id:naoya さんの記事で丁寧に解説されてるので、ここでは書かない。

変更に関しては、このページを参考にした

• Sinatra Integration · chriseppstein/compass Wiki

Compass

普段cssを書くときは、sassを使っているが、さらにcompassも使用している。compassはcssのフレームワークのようなもの。sassでは、よく使うcssの定義をmixinっていう再利用可能な形で定義できる。border-radiusとか、よく使うのにベンダープレフィックスを気にしないといけないものも、Compassでは、mixinが既に定義されているため、簡単に使用出来るようになっている。

なので、たとえばborder-radiusを付けたいときは、

 @import "compass/css3/border-radius"

 .box
   +border-radius(3px)

とsassファイルで定義することで、boxクラスにベンダープレフィックス付きでborder-radiusの設定がされます。 compassで定義されているmixin一覧はこちら

CodeSchool

Compassについては、CodeSchoolで詳しく説明されてたのが非常に勉強になりました。Compassについてもう少し知ってみたい人は聞いてみたらいいかもです。#有料だけど (CodeSchool - Assembling SASS)