• HTMLCSS

【sass】@contentを使ってmediaクエリを簡略化する方法

cssでセクション事にメディアクエリをいちいち定義するのが面倒。

本記事では@mixinと@contentを使って、mediaクエリを簡略化して記述する方法について解説します。

@contentの使い方。mediaクエリを簡略化する方法

// スマホのメディアクエリを定義。
@mixin sp {
  @media screen and (max-width: 767px) {
    @content;
  }
}

p {
  font-size: 16px;
  // スマホのCSSプロパティをmediaクエリのコンテンツブロックへ渡す。
  @include sp {
    font-size: 14px;
  }
}

@contentを使ってmediaクエリを簡略化するコード例です。

@mixin内で@contentを使う事で、CSSプロパティを@content側に渡す事が可能になります。

まずは@mixinを定義。（本コード例ではspとします）

上記@mixinの定義内でmediaクエリを記述。

mediaクエリのブロック内で@content;と記述します。

@includeで@mixinを呼び出し。

上記ブロック内でmediaクエリに反映したいCSSプロパティを記述します。

以上で簡略化が完了。

mediaクエリをいちいち定義する事なく、@mixinで定義した名前を記述するだけでmediaクエリで適用したいCSSプロパティを記述する事が可能になります。

まとめ

sassで@contentを使いmediaクエリを簡略化する方法について紹介しました。

以上で解説を終わります。