メディアクエリーの様な、繰り返し記述するルールセットがある場合には@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
も便利なので、ぜひ覚えておきましょう。