SCSSの@mediaの使い方

Question

SCSSについて教えてください。
PC画面サイズではボタンを表示しないが
タブレットとスマホ画面サイズの場合はボタンを表示するやり方がわかりません。

サイズの設定は下記のコードで行いました。

$pc: 1200px;
$tab: 501px;
$sp: 500px;

@mixin pc {
    @media (min-width:($pc)){
        @content;
    }
}
@mixin tab {
    @media (min-width:($tab)){
        @content;
    }
}
@mixin sp {
    @media (max-width:($sp)){
        @content;
    }
}

@inclideを用いてコードを書きたいのですが

button{
  @include tab{ボタン表示についてのコード}
  @include sp{ボタン表示についてのコード}
}

現状、上記のように二つ「@include」作り、中は同じコードを書く方法しかわかりません。
@include tabと@include spをまとめて書く方法は何かないでしょうか。

Answer 1

以下のような感じではダメですか？

@mixin spAndTab {
    @include tab{@content}
    @include sp{@content}         
}

button{
  @include spAndTab{color:red}
}

蛇足ですが、個人的には min と max を混ぜるのは、混乱しそうで好きではないです。

Comments

[退会済みユーザー]

この書き方が良さそうです！

0-500 スマホ
501-1199 タブ
1200以上 PC

これで区分けする場合、どこかをminかmaxにしなければ難しいと思っていたのですが
全てminかmaxに統一する方法があるのでしょうか。
関係ない質問ですいません。

[Lhankor_Mhy]

モバイルファーストの場合、メディアクエリなしでスマホのレイアウトを作って、そのあと min-width でブレイクポイントを作っていくことが多いように思います。
デスクトップファーストの場合は、逆に、メディアクエリなしでPCレイアウトを作って、max-width でブレイクポイントを作っていくことになります。

もし、それぞれのブレイクポイントを独立させて作るのであれば、min-width and max-width で、メディアクエリが重ならないようにした方がいいかもしれないです。
好みの問題ではありますが。

[退会済みユーザー]

たしかに今のCSSだと何ファーストなのかよく分からなくなっている気がします。ご丁寧にありがとうございます！少し変えてみます！