はてなブログの見出しスタイルを Mixin 管理する

@mixin header-base() に文字と行間の指定をまとめた。

@mixin header-base($font-size) {
  font-size: $font-size;
  font-weight: bold;
  line-height: 1.25;
}

@mixin h1 ~ h4 で基本の見出しスタイルを用意した。これらの Mixin には上下の余白も指定した。

@include break はブレークポイントの指定。
ブレークポイントでは文字サイズを変えている。同じ文字サイズの指定で @mixin header-base() にいれなかったのは、引数を取るときに @include header-base($xlarge-size, $xxlarge-size) とかなると何の指定かわからなくなりそうだったから。

@mixin h1 {
  @include header-base($xlarge-size);
  @include break {
    font-size: $xxlarge-size;
  }
  margin-top: $xxxlarge-size;
  margin-bottom: $xlarge-size;
}

基本の見出しスタイルを読み込んで、ページトップなどの見出し（上方向に余白をつけない見出し）をつけない。ここまで Mixin にしなくてもよいかもしれない。

@mixin page-header {
  @include h1;
  margin-top: 0;
  .ad + & {
    margin-top: $xxxlarge-size;
  }
}

@mixin hatena-module-header {
  @include h4;
  margin-top: 0;
  a {
    color: $black;
    &:hover {
      text-decoration: none;
    }
    &:visited {
      color: $black;
    }
  }
}

あとは記事見出しとか残ってるけど、どうしよかな。