複数のBreakpointで同じCSSを適用する方法 – SCSSの@mixinを使った効率的なメディアクエリの活用法

CSSのメディアクエリを使用する際、特定のBreakpointで同じスタイルを適用する方法を探している方は多いでしょう。この記事では、SCSSの@mixinを活用して、複数のBreakpointに対して同じCSSを効率的に適用する方法について解説します。

1. SCSSの@mixinとメディアクエリの基本
2. 複数のBreakpointに同じCSSを適用する方法
3. SCSSの@mixinをさらに効率的に活用する方法
4. 複数のBreakpointを使ってコードの重複を減らす方法
5. まとめ：SCSSの@mixinでメディアクエリを効率的に管理

1. SCSSの@mixinとメディアクエリの基本

SCSSの@mixinは、共通のスタイルやコードを再利用するための便利な機能です。メディアクエリを複数のBreakpointに渡って使いたい場合に、@mixinを利用するとコードを効率的に管理できます。

まず、メディアクエリを複数のBreakpointに対応させるために、以下のようなSCSSのコードを作成します。

$breakpoints: (
  bksp: "screen and (max-width: 567px)",
  bkpc: "screen and (min-width: 568px)",
  bklg: "screen and (min-width: 900px)",
  bkxl: "screen and (min-width: 1200px)",
);

@mixin mq($breakpoint) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

2. 複数のBreakpointに同じCSSを適用する方法

質問者が示した通り、SCSSでは複数のBreakpointに同じCSSを適用することが可能です。例えば、以下のように、`bkpc`と`bklg`の2つのBreakpointに対して、同じCSSプロパティを指定する方法があります。

@include mq(bkpc), mq(bklg) {
  border: 2px solid red;
}

このように、複数のメディアクエリをカンマで区切って記述することで、`bkpc`と`bklg`の両方に同じスタイルを適用できます。

3. SCSSの@mixinをさらに効率的に活用する方法

SCSSの@mixinを使うことで、メディアクエリを効率よく管理できますが、さらに可読性を高めるために、共通のスタイルを変数としてまとめておくことも一つの手です。

このように、色やスタイルを変数で管理することで、さらに効率よくスタイルの適用が行えます。

4. 複数のBreakpointを使ってコードの重複を減らす方法

また、複数のBreakpointに対して異なるスタイルを指定する必要がある場合、`@include`を複数回使うこともできます。しかし、この方法はコードの重複が増えてしまうため、可能な限り@mixinを使って重複を減らすようにしましょう。

例えば、以下のようにして、個別に異なるスタイルを適用しつつ、同じコードを繰り返さないようにできます。

@include mq(bksp) {
  border: 1px solid black;
}
@include mq(bkpc), mq(bklg) {
  border: 2px solid red;
}
@include mq(bkxl) {
  border: 2px solid blue;
}