SCSS3.2.0のplaceholderを試してみた。

scss-placeholder

福山です。

SCSSをアップデートして3.2.0にしてみました。


sudo gem update sass
scss -v

そして、3.2.0から使えるようになったプレースホルダセレクタを試してみました。

[%]パーセントが付いたブロックを@extendすることで使えます。

基本


%abc{
  color: blue;
  background: red;
}
div{
  @extend %abc;
  text-align: center;
}
p{
  @extend %abc;
}

結果


div, p {
  color: blue;
  background: red;
}
div {
  text-align: center;
}

当てはめる

複雑になりそうですが、部分的に当てはめる感じで使うことも可能。


#wrap %abc span{
  color: blue;
  background: red;
}
div{
  @extend %abc;
  text-align: center;
}
p{
  @extend %abc;
}

結果


#wrap div span, #wrap p span {
  color: blue;
  background: red;
}
div {
  text-align: center;
}

メディアクエリでの使用

メディアクエリ内では外側のplaceholderは使えません。


%abc{
  color: blue;
  background: red;
}
@media only screen and (max-width: 481px) {
  div{
    @extend %abc; // error
  }
}

メディアクエリ内でplaceholderを定義すればOK。


@media only screen and (max-width: 481px) {
  %abc{
    color: blue;
    background: red;
  }
  div{
    @extend %abc;
  }
}

結果


@media only screen and (max-width: 481px) {
  div {
    color: blue;
    background: red;
  }
}

外側のmixinを@includeするのはOK。

外部scssファイルにplaceholderを記述してメディアクエリのブロックごとに@importで読み込むという手もあります。

その他

使いどころはありませんが、逆にメディアクエリ内で定義したplaceholderには外部からアクセス可能です。


div{
  @extend %abc;
}
@media only screen and (max-width: 481px) {
  %abc{
    color: blue;
    background: red;
  }
}

結果


@media only screen and (max-width: 481px) {
  div {
    color: blue;
    background: red;
  }
}

同じ名前のplaceholderが外側とメディアクエリ内のどちらにもある場合は、両方に配置されるので注意。

参考

Sass Reference