Written by Kasumi

【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クエリを簡略化する方法について紹介しました。

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

目次

関連記事

HTMLCSS

【CSS】簡単にアニメーションを実装! Animate.cssの使い方

更新日:2019.11.28
750
HTMLCSS

【HTML】selectタグを選択したらformをsubmit(送信)する方法

2023.08.31
1417
HTMLCSS

【簡単】CSSで点線・破線の間隔を空ける方法

2022.10.01
2296
HTMLCSS プログラミング

【簡単】CSSで数字を縦向き・縦書きにする方法【text-orientation: upright;】

2022.04.06
6105