blueprint_grid_mixin.sass

blueprint_grid_mixinを使ってみる。

別途blueprintのcss群を準備するのかと思ったらそうではなくて、sassでblueprint風gridシステムを使えるようにする、という.sassでした。うむ、これって手軽で便利かも。blueprintを使うと、tableのセルがが全部自動的に等幅になったりするので、使いやすいところだけいただいちゃう思想ってステキ。

もともとのファイルblueprint-grid-mixin.sassで、書式はsassです。このままでも確か使えるはずなんですが、いちおう.scssに変換して@importしてみる。コンバートすると

@mixin colborder {
  padding-right: 24px;
  margin-right: 25px;
  border-right: 1px solid #eeeeee; }

@mixin left-with-10px-margin {
  float: left;
  margin-right: 10px; }

@mixin span-1 {
  width: 30px;
  @include left-with-10px-margin; }

@mixin span-2 {
  width: 70px;
  @include left-with-10px-margin; }

@mixin span-3 {
  width: 110px;
  @include left-with-10px-margin; }

@mixin span-4 {
  width: 150px;
  @include left-with-10px-margin; }

@mixin span-5 {
  width: 190px;
  @include left-with-10px-margin; }

こんなふうになります。あとは幅をspan-*で決めたいdivの定義で@includeすればいい、と。

post-box{
 @include span-12;
   border:{
      style:solid;
      left:{
         width:2px;
         color:#888;
      }
      right:{
         width:1px;
         color:#ccc;
      }
  }
}

なるほどmixinって便利だな。css書くならsassが分かりやすくていいかもしれません。
scssであれこれ書きながら、hamlも少しずつ試してみる。
これでviewがどの程度しゃきしゃき描画されるのか、楽しみではある。