実験：scssとhaml（とblueprint_grid_mixin）

ちょびっとscssを書いてみる。ということはhamlも書いてみないと実験にならない。

とりあえずblueprint_grid_mixinもいっしょに使ってみる、と。
ますは.scss。今のところはこんな感じです。

@import "blueprint_grid_mixin";
#navbar {
  @include span-24;
  @include last;
    //height: 23px;
    background-color: #888;
    ul { list-style-type: none; }
    li {
      float: left;
      width:5em;
      margin-right:3px;
     a { font-weight: bold; }
    }

}
#post-box{
  @include span-20;
  
}
#main_head{
  @include span-24;
  @include last;
}
#main{
  @include span-20;
}
#right_side_bar{
  @include span-4;
  @include last;
  @include box;
}
#footer{
  @include span-24;
  @include last;
  @include box;
}

で、haml。

!!!
%html
  %head
    %title HamlApp
    = stylesheet_link_tag :all
    = javascript_include_tag :defaults
    = csrf_meta_tag
  %body
    .container
      #main_head
        head
      #navbar
        head_navbar
      #main
        = notice
        = yield
      #right_side_bar
        side_bar
        
      #footer
        footer

これがこのように表示されます。

このlayoutをhtml.erbで書くと次のようになる。

（syntaxHighlighterだとhtmlのエラーがでるので画像です）
こいつは素のblueprent-cssを使ってますけどね。

やはりかなり見た目もシンプル、かつ読みやすく入力しやすいですね、haml。