読者です 読者をやめる 読者になる 読者になる

あと味

たくさん情報を食べて、たくさん発信すると、あとになって味わい深い。

Sassの@extendでCSSとHTMLをシンプルに

明日、UPGRADE JAPANにて、Sassについて話す予定です。

それ用にSassの記事増やしておきたかったんですけど、あまりそれもできず。しばらくは、UPGRADE JAPANのフォローアップとして、いくつかSassの記事を投稿する予定です。

さて、「Sassの@extendでCSSとHTMLをシンプルに」ということですが、Sassの@extendを使わなかった場合と、使った場合の対比を書いてみます。

したいこと

  • サイドバーがある
  • とあるページのサイドバーは、既存のサイドバーのスタイルと背景色が違うだけ

これですね。つ First Look: Object Oriented CSS - SitePoint

単純なCSS

単純にこれをCSSで対応すると以下のようになるかもしれません。

.sidebar {
  /* sidebarのスタイル */
}
...省略...
.onsalesidebar {
  /* ここにsidebarのスタイルをまるまるコピペする */
  background-color: #FFA500;
}

これだと同じスタイルをコピペしないといけなくて煩雑ですね。

先ほどのリンク先にある例のように、bodyにclassを当てて、各ページのスタイルを使い分ける方が少し楽かもしれません。

<body class="onsale">
.sidebar {
  /* sidebarのスタイル */
}
body.onsale .sidebar {
  background-color: #FFA500;
}

これであれば、必要な箇所だけ上書きするだけで済みますね。

OOCSS

Object Oriented CSSというCSSの設計手法があるそうです。id:t32kに教えてもらいました。

この手法を使うと、小さい部品の組み合わせをclass属性で指定することでモジュール性の高いCSSの設計ができるようです。

<div class="sidebar onsalesidebar">sidebar content…  
</div>
.sidebar {
  /* sidebarのスタイル */
}
.onsalesidebar {
  background-color: #FFA500;
}

最初の例に似ていますが、既存のスタイルをコピペする必要はありません。HTML側でclass属性の値を組み合わせているので、CSS側はシンプルな記述で事足ります。

Sassの@extend

Sassの@extendを使うと、これをさらにシンプルに適用できます。

<div class="onsalesidebar">sidebar content…  
</div>
.sidebar {
  /* sidebarのスタイル */
}
.onsalesidebar {
  @extend .sidebar;
  background-color: #FFA500;
}

これは以下のように展開されます。

.sidebar, .onsalesidebar {
  /* sidebarのスタイル */
}
.onsalesidebar {
  background-color: #FFA500;
}

この利点はHTML側でclassを複数組み合わさなくても良い点と、@extendを記述することで、.sidebarのスタイルを.onsalesidebarで拡張していることが明示化されてわかりやすいという点があります。*1

SassはOOCSSの考え方にも、うまくマッチしますね。

*1:いちいち、HTMLを確認しなくても両者のスタイルの関連性がわかります