手軽にレスポンシブWebデザインを実現するSCSS mixin

SCSS mixin

/styles/mixins/_mobile-view.scss

@mixin mobileView {
  @media screen and (max-width: 599px) {
    @content;
  }
}

/styles/mixins/_tablet-view.scss

@mixin tabletView {
  @media screen and (max-width: 1024px) and (min-width: 600px) {
    @content;
  }
}

/styles/mixins/_pc-view.scss

@mixin pcView {
  @media screen and (min-width: 1025px) {
    @content;
  }
}

/styles/_mixins.scss

@forward './mixins/mobile-view';
@forward './mixins/tablet-view';
@forward './mixins/pc-view';

使い方

画面サイズに応じて表示する要素を変えたい場合は以下のような実装で実現できます。

Component.module.scss

@use 'styles/mixins';

// モバイルだけ表示
.mobile {
  display: none;
  @include mixins.mobileView {
    // スタイル書く
  }
}

// タブレットだけ表示
.tablet {
  display: none;
  @include mixins.tabletView {
    // スタイル書く
  }
}

// PCだけ表示
.pc {
  display: none;
  @include mixins.pcView {
    // スタイル書く
  }
}

index.tsx

import styles from './Component.module.scss'

const Component = () => {
  return (
    <>
      <div className={styles.mobile}>モバイルだけ表示</div>
      <div className={styles.tablet}>タブレットだけ表示</div>
      <div className={styles.pc}>PCだけ表示</div>
    </>
  )
}