@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; } } }
あとは記事見出しとか残ってるけど、どうしよかな。