Bootstrap 4 の breakpoint の変更と作業環境の breakpoint を連動させる

Bootstrap 4 の breakpoint と、作業環境の breakpoint を連動させます。

Bootstrap の breakpoint 変更ファイル
bootstrap-4.3.1/scss/_variables.scss

該当箇所（変更が必要であれば下記の値を変更）

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

変更例）

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 640px,
  lg: 800px,
  xl: 960px
) !default;

$container-max-widths: (
  sm: 480px,
  md: 640px,
  lg: 800px,
  xl: 960px
) !default;

作業環境の breakpoint（変更が必要であれば下記の値を変更）

$w-576: 576px;
$w-768: 768px;
$w-992: 992px;
$w-1200: 1200px;

$-lt-w-576: 'only screen and (max-width: #{$w-576 - 1})'; // 576px 未満
$-lt-w-768: 'only screen and (max-width: #{$w-768 - 1})'; // 768px 未満
$-lt-w-992: 'only screen and (max-width: #{$w-992 - 1})'; // 992px 未満
$-lt-w-1200: 'only screen and (max-width: #{$w-1200 - 1})'; // 1200px 未満

$-mt-w-576: 'only screen and (min-width: #{$w-576})'; // 576px 以上
$-mt-w-768: 'only screen and (min-width: #{$w-768})'; // 768px 以上
$-mt-w-992: 'only screen and (min-width: #{$w-992})'; // 992px 以上
$-mt-w-1200: 'only screen and (min-width: #{$w-1200})'; // 1200px 以上

変更例）

$w-480: 480px;
$w-640: 640px;
$w-800: 800px;
$w-960: 960px;

$-lt-w-480: 'only screen and (max-width: #{$w-480 - 1})'; // 480px 未満
$-lt-w-640: 'only screen and (max-width: #{$w-640 - 1})'; // 640px 未満
$-lt-w-800: 'only screen and (max-width: #{$w-800 - 1})'; // 800px 未満
$-lt-w-960: 'only screen and (max-width: #{$w-960 - 1})'; // 960px 未満

$-mt-w-576: 'only screen and (min-width: #{$w-576})'; // 576px 以上
$-mt-w-640: 'only screen and (min-width: #{$w-640})'; // 640px 以上
$-mt-w-800: 'only screen and (min-width: #{$w-800})'; // 800px 以上
$-mt-w-960: 'only screen and (min-width: #{$w-960})'; // 960px 以上

@media #{$-lt-w-480} /* 480px 未満 */
{
  padding: 20px;
}