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

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

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

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

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

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

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

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

<body class="onsale">

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

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

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を使うと、これをさらにシンプルに適用できます。

<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を確認しなくても両者のスタイルの関連性がわかります

あと味