haml + scss 定石パターンその１

同じ構造のマークアップをするときはこんな感じでmixinで記述。

page.html.haml

%dl.name
  %dt{title: 'なまえ' } なまえ
  %dd #{you.name} 

_page.scss

 dl {                                                                      
   @include profile-images(name, pname);
}

_mixins.scss

@mixin profile-images($class, $name) {
  &.#{$class} > dt {
    @extend .profile-hd_#{$name};
  }
}