Sassで@content

メディアクエリーの様な、繰り返し記述するルールセットがある場合には@Contentを使って、ブロックをメディアクエリーに渡すといった技も使えます。

メディアクエリーを@mixinにする

ルールセット内でメディアクエリーを指定して見通しを良くしてしまおうというケースの例。

@mixin media($width) {
  @media only screen and (max-width: $width) {
    @content;
  }
}

#main{
  width: 100%;
  background: green;
  @include media(640px) {
    width: 90%;
    margin: auto;
    background: blue;
  }
  @include media(320px) {
    width: 90%;
    margin: auto;
    background: red;
  }
}

↓ ↓ ↓ ↓コンパイル↓ ↓ ↓ ↓

#main {
  width: 100%;
  background: green;
}
@media only screen and (max-width: 640px) {
  #main {
    width: 90%;
    margin: auto;
    background: blue;
  }
}
@media only screen and (max-width: 320px) {
  #main {
    width: 90%;
    margin: auto;
    background: red;
  }
}

まず、「$width」という引数を持ったミックスイン「media」にメディアクエリーを持たせて、max-widthに引数「$width」を渡すようにしています。 そしてこのメディアクエリーの中身は@content。これでミックスインのセットは完了。

メディアクエリーが必要な部分で、ミックスインに引数「$width」を渡してプロパティーと値を書いてあげます。 すると、@contentにロパティーと値を代入して、ミックスイン返してくれるます。

---

この@Contentも便利なので、ぜひ覚えておきましょう。