Sass の placeholder について

gistfile1.md

placeholder について

Sass 3.2 になってからの新機能らしい。
簡単に言うと css ファイルに書きだされない extend って感じ。

書き方は下記。
valiables は『$』だけど、placeholder は『%』を頭につける。

%redtext-redbackground{
    background: #f00;
    color: #f00;
}

.sample1{
    @extend %redtext-redbackground;
}

.sample2{
  @extend %redtext-redbackground;
  margin: 0 auto;
  padding: 20px;
}

って書くと、コンパイルされた css は

.sample1, .sample2 {
    background: #f00;
    color: #f00; }
  
.sample2 {
    margin: 0 auto;
    padding: 20px; }

となる。

%redtext-redbackground で定義した内容は css で @extend しないと表示されない。
extend は使わなかったとしても書きだされてたので、時には無用なものもあったと思う。例えば clearfix とか。

逆に placeholder 使えるんなら extend 使う必要ってあるんかな？

参考:

• Sass 3.2 からは placeholder selector を使おう
• SASS 3.2 の(僕的)目玉機能のPlaceHolderを使ってみた