demo stylesheet scss

stylesheet_demo.scss

// フォント
$font-family_default: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
$font-family_logo: 'Srisakdi', cursive;

// フォントサイズ
$font-size_s: 1rem;
$font-size_m: 1.4rem;
$font-size_default: 1.6rem;
$font-size_l: 2.6rem;
$font-size_xl: 4.2rem;
$font-size_xxl: 11rem;
$font-size_xxl: 18rem;

// 間隔
$space_s: 5px;
$space_m: 10px;
$space_l: 15px;
$space_xl: 20px;
$space_xxl: 30px;
$space_3l: 40px;

// ブレークポイント
$breakpoints: (
  'sm': 'screen and (max-width: 414px)',
  'md': 'screen and (max-width: 768px)',
  'lg': 'screen and (max-width: 1000px)',
  'xl': 'screen and (max-width: 1200px)',
) !default;

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