SASS で画面幅によって切り替わるスタイルをいい感じに管理する ( MediaQuery )

MediaQuery を mixin で簡単に使えるようにする

シンプルな例です。

今回は 2サイズしか想定していないので愚直に書いていますが、複数のサイズのバリエーションに対応したい場合は、map を組み合わせて使うと全パターン書き連ねるようなことにならず、しかもメンテナンス性も向上するので嬉しいことになります。
この辺は if や switch 文を減らす考え方と似てます。

// 768px 未満
@mixin is-small-screen() {
  @media screen and (max-width: 767px) {
    @content;
  }
}

// 768px 以上
@mixin is-large-screen() {
  @media screen and (min-width: 768px) {
    @content;
  }
}

is-なんとか-screen という名前が長ったらしくて使いにくいという話は一旦その辺に置いといてください。

用意した mixin の利用例

mixin の名前とかはテキトーです。

// 実際にあてたいスタイルの実装 (implements)
// 引数で受け取った文字サイズを元に、値を設定する
// …の例
@mixin sizing-impl($font-size) {
  height: $font-size * 1.5;
  font-size: $font-size;
  line-height: $font-size * 1.5;
}

// (※1)
@mixin sizing($base) {
  // 通常はベースの数値を rem に変換して設定する
  @include sizing-impl($base * 1rem);

  // 小さい画面幅ではベースの数値を vw に変換して設定する
  // …これで、"小さい画面の場合は画面幅に対して相対的な文字サイズ"
  //  みたいなことを実現できる
  @include is-small-screen() {
    @include sizing-impl($base * 10vw);
  }
}

.text {
  display: block;

  &.small {
    // 768px 以上は 1rem、未満は 10vw
    @include sizing(1)
  }

  &.medium {
    // 768px 以上は 2rem、未満は 20vw
    @include sizing(2)
  }

  &.large {
    // 768px 以上は 3rem、未満は 30vw
    @include sizing(3)
  }
}

• (※1) "画面幅によってスタイルを変える" というロジック部分を切り出しておくと、各要素のスタイル指定箇所で毎回 mixin を呼ばなくてよくなるのでオススメです。

出力CSS

.text {
  display: block; }
  .text.small {
    height: 1.5rem;
    font-size: 1rem;
    line-height: 1.5rem; }
    @media screen and (max-width: 767px) {
      .text.small {
        height: 15vw;
        font-size: 10vw;
        line-height: 15vw; } }
  .text.medium {
    height: 3rem;
    font-size: 2rem;
    line-height: 3rem; }
    @media screen and (max-width: 767px) {
      .text.medium {
        height: 30vw;
        font-size: 20vw;
        line-height: 30vw; } }
  .text.large {
    height: 4.5rem;
    font-size: 3rem;
    line-height: 4.5rem; }
    @media screen and (max-width: 767px) {
      .text.large {
        height: 45vw;
        font-size: 30vw;
        line-height: 45vw; } }

　　終
制作・著作
━━━━━
　ⓁⓈⓅ