sass - コンパスのブレーク ポイントを変更するにはどうすればよいですか? 応答ミックスインを使用する場合

Question

コンパスとサス (scss) を使用して CSS ファイルを作成しています。タブレットのブレークポイントが広すぎると思います。私のモバイル ファースト Web サイトの最初のブレークポイントは 700px あたりから始まります。

タブレットのブレークポイントを 360px に変更するにはどうすればよいですか? （Hは）

// breakpoint is around 700px
@include respond-to(tablet) {
    margin: 0;
}

Answer 1

ミックスインは次のようになります。

@mixin respond-to($media) {
    @if $media == smartphone {
        @media screen and (min-device-width: $break-smartphone) { @content; }
    }
    @if $media == smartphone-only {
        @media screen and (min-width: $break-smartphone) and (max-width: $break-tablet) { @content; }
    }
    @if $media == tablet {
        @media screen and (min-width: $break-tablet) { @content; }
    }
    @if $media == tablet-only {
        @media screen and (min-width: $break-tablet) and (max-width: $break-widescreen) { @content; }
    }
    @if $media == mobile-only {
        @media screen and (max-width: $break-widescreen) { @content; }
    }
    @if $media == widescreen {
        @media screen and (min-width: $break-widescreen - $webkit-scrollbar-width) and (min-device-width: $force-tablet ) { @content;}
    }
}

$media$break-tabletこの mixinが変更したい変数である場合、他の Sass 変数の変数/プレースホルダーです。

だから置くだけ

$break-tablet: 360px;

ミックスインをインクルードしている SCSS ファイルのどこかに (インクルードの上にある必要はありません)、問題ありません。

もう 1 つの質問は、なぜ 360px のブレークポイントを含めたいのかということです。360px 幅を使用する一般的なタブレットはありません。それは何よりも（古い）スマートフォンです。ただし、360px の iPhone は除外されます。