Sassを使ったレスポンシブ対応

はじめに

学んだことを忘れないように備忘録として残しています

Sassを使い始めたらかなりレスポンシブの効率が上がったので、本記事ではその方法を紹介していきます！

Sassとは

Sassは、CSSをより効率的に書くための拡張言語です。
変数やネスト、mixin、継承などの機能を使って、CSSコードを簡潔で再利用しやすく管理できます。Sassで書いたコードは最終的に通常のCSSにコンパイルされ、Webブラウザで使えるようになります。

Sassを使用したレスポンシブ

例：スマホからPC・タブレットサイズのレスポンシブ

【元の記述】

  .top_news-ttl {
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;

    @media (min-width: 1080px) {
      font-size: 24px;
    }
  }

【Sassを使用した記述】
1.mixinでブレイクポイントと＠mediaの記述を定義しておきます。

$md: 768px;
$lg: 1080px;
$xl: 1200px;

@mixin mq($bp) {
    @media (min-width: ($bp)){
       @content; 
    }
}

※@content はmixin を呼び出したときに指定したスタイルをその場に挿入するためのものです。具体的には、mixin を使う側で書いたスタイルを @content の場所に差し込むことができます。

2.style.scssにレスポンシブの記述をする

.top_news-ttl {
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;

    @include mq($md) {
        font-size: 20px;
    }
    @include mq($lg) {
        font-size: 24px;
    }
  }

まとめ

Sassを活用することで、効率的にレスポンシブ対応を実装できるようになります。
特に、mixinを使ってブレイクポイントを管理すると、メディアクエリの記述が簡潔になり、コードの再利用性も向上します。