SCSS utils

_breakpoint.scss

$breakpoint-sm: 400px !default;
$breakpoint-md: 768px !default;
$breakpoint-lg: 1024px !default;

// min-width
$breakpoint-up: (
  'sm': 'screen and (min-width: #{$breakpoint-sm})',
  'md': 'screen and (min-width: #{$breakpoint-md})',
  'lg': 'screen and (min-width: #{$breakpoint-lg})',
) !default;

// max-width
$breakpoint-down: (
  'sm': 'screen and (max-width: #{$breakpoint-sm - 1px})',
  'md': 'screen and (max-width: #{$breakpoint-md - 1px})',
  'lg': 'screen and (max-width: #{$breakpoint-lg - 1px})',
) !default;

// @mixinの定義
@mixin mq-up($breakpoint: md) {
  @media #{map-get($breakpoint-up, $breakpoint)} {
    @content;
  }
}

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

_spacing.scss

// 参考 Vuetify https://vuetifyjs.com/ja/styles/spacing/
$spaceamounts: (
  0,
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8,
  9,
  10,
  11,
  12,
  auto
); // Adjust this to include the pixel amounts you need.
$sides: (top, bottom, left, right); // Leave this variable alone

@each $space in $spaceamounts {
  @each $side in $sides {
    @if type-of($space) == number {
      .m#{str-slice($side, 0, 1)}-#{$space} {
        margin-#{$side}: (#{$space * 4}px) !important;
      }
      // negative
      .m#{str-slice($side, 0, 1)}-n#{$space} {
        margin-#{$side}: (#{$space * -4}px) !important;
      }
      .p#{str-slice($side, 0, 1)}-#{$space} {
        padding-#{$side}: (#{$space * 4}px) !important;
      }
      // negative
      .p#{str-slice($side, 0, 1)}-n#{$space} {
        padding-#{$side}: (#{$space * -4}px) !important;
      }
    } @else {
      // auto
      .m#{str-slice($side, 0, 1)}-#{$space} {
        margin-#{$side}: #{$space} !important;
      }
      .p#{str-slice($side, 0, 1)}-#{$space} {
        padding-#{$side}: #{$space} !important;
      }
    }
  }
  @if type-of($space) == number {
    .ma-#{$space} {
      margin: (#{$space * 4}px) !important;
    }
    // negative
    .ma-n#{$space} {
      margin: (#{$space * -4}px) !important;
    }
    .my-#{$space} {
      margin-top: (#{$space * 4}px) !important;
      margin-bottom: (#{$space * 4}px) !important;
    }
    // negative
    .my-n#{$space} {
      margin-top: (#{$space * -4}px) !important;
      margin-bottom: (#{$space * -4}px) !important;
    }
    .mx-#{$space} {
      margin-left: (#{$space * 4}px) !important;
      margin-right: (#{$space * 4}px) !important;
    }
    // negative
    .mx-n#{$space} {
      margin-left: (#{$space * -4}px) !important;
      margin-right: (#{$space * -4}px) !important;
    }
    .pa-#{$space} {
      padding: (#{$space * 4}px) !important;
    }
    // negative
    .pa-n#{$space} {
      padding: (#{$space * -4}px) !important;
    }
    .py-#{$space} {
      padding-top: (#{$space * 4}px) !important;
      padding-bottom: (#{$space * 4}px) !important;
    }
    // negative
    .py-n#{$space} {
      padding-top: (#{$space * -4}px) !important;
      padding-bottom: (#{$space * -4}px) !important;
    }
    .px-#{$space} {
      padding-left: (#{$space * 4}px) !important;
      padding-right: (#{$space * 4}px) !important;
    }
    // negative
    .px-n#{$space} {
      padding-left: (#{$space * -4}px) !important;
      padding-right: (#{$space * -4}px) !important;
    }
  } @else {
    // auto
    .ma-#{$space} {
      margin: #{$space} !important;
    }
    .pa-#{$space} {
      padding: #{$space} !important;
    }
    .mx-auto {
      margin-right: auto !important;
      margin-left: auto !important;
    }
    .px-auto {
      padding-right: auto !important;
      padding-left: auto !important;
    }
  }
}