はてなブログのデザインを Sass の Mixin で管理する案

はてなブログの CSS カスタマイズについて。Sass の Mixin と変数を使えばテーマの量産がもっと簡単になるんじゃないか。

はてなブログの CSS は、同じ見出しのスタイルでも .entry-title と .archive-heading で違う。他にも日付やカテゴリーなど、似たような見た目で違う CSS クラスが当てられているものがある。

これらを個別に CSS でカスタマイズしたらコードの見通しが悪くなるので、Sass の Mixin を使うのが良さそうだと思った。

ついでに色やサイズに関しても変数や Mixin で管理できるんじゃないか？これらについても規則をつくってしまいさえすれば、基準に設定した値を変えればいくつでもバリエーションをつくれる気がしてる。

• 配色
  • メインカラー（基準色）を決めると、定義した規則に従ってサブカラーやキーカラー、黒、グレー、白といった色を決定する仕組み
• サイズ
  • 基準サイズを決めると、定義した規則に従って見出しや余白のサイズを決定する仕組み
• レイアウト
  • グローバルヘッダー
  • ヘッダー
  • フッター
  • メイン（#content, #wrapper, #box2）
• コンポーネント
  • 見出し
  • 日付
  • カテゴリー
  • ボタン
  • リスト
  • 検索ボックス
  • 画像つきテキスト
  • ページャー
  • 記事内コンテンツ（引用とか、色々）

こんな感じで Mixin と変数を定義すればよさそう。

あとでやってみよ。