회전식 웹 설계를 쉽게 구현하는 SCSS mixin

SCSS mixin

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

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

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

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

사용법

@use 'styles/mixins';

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

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

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

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>
    </>
  )
}