Sass Mixin を使用したレスポンシブデザインの実装方法

1. ブレークポイントごとにMixinを定義する方法:

@mixin breakpoint($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: 767px) {
      @content;
    }
  }
  @else if $breakpoint == tablet {
    @media (min-width: 768px) and (max-width: 1023px) {
      @content;
    }
  }
  @else if $breakpoint == desktop {
    @media (min-width: 1024px) {
      @content;
    }
  }
}

このMixinを使用すると、以下のようにブレークポイントごとにスタイルを指定できます。

.my-element {
  width: 100%;
  @include breakpoint(mobile) {
    width: 50%;
  }
  @include breakpoint(tablet) {
    width: 70%;
  }
  @include breakpoint(desktop) {
    width: 80%;
  }
}

2. ブレークポイントをマップとして定義する方法:

$breakpoints: (
  mobile: (max-width: 767px),
  tablet: (min-width: 768px) and (max-width: 1023px),
  desktop: (min-width: 1024px)
);
@mixin breakpoint($breakpoint) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

この場合、以下のようにMixinを使用します。

.my-element {
  width: 100%;
  @include breakpoint(mobile) {
    width: 50%;
  }
  @include breakpoint(tablet) {
    width: 70%;
  }
  @include breakpoint(desktop) {
    width: 80%;
  }
}

これらの方法を使用することで、ブレークポイントごとに異なるスタイルを適用することができます。SassのMixinを活用することで、コードの再利用性も高めることができます。