sass baseサンプル fontサンプル

_base.scss

@use "color" as c;
@use "font" as t; //mean type

// base layout variables
$width_pc: 1536px;
$sideMargin_pc: 80px;
$width_sp: 768px;
$sideMargin_sp: 20px;

// tablet width
$width_tab: 900;

// margin size
$margin_s: 40;
$margin_m-: 60;
$margin_m: 100;
$margin_l: 180;

// default hover style
a:hover {
  opacity: 0.5;
}

// br
@media screen and (max-width: 768px) {
  .br_onPC {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  .br_onSP {
    display: none;
  }
}

@function get_vw($size, $viewport: 375) {
  $rate: calc(100 / $viewport);
  @return $rate * $size * 1vw;
}

@function calc_fz($size, $viewport: 375) {
  $rate: calc(100 / $viewport);
  @return clamp(14px, #{$rate * $size}vw, #{$size}px);
}

@mixin font-rem($size, $base: 16) {
  font-size: $size + px;
  font-size: calc($size / $base) + rem;
}

// mixins
@mixin media-pc {
  @media screen and (min-width: calc($width_sp + 1px)) {
    @content;
  }
}

@mixin media-sp {
  @media screen and (max-width: $width_sp) {
    @content;
  }
}

@mixin media-tab {
  @media screen and (min-width: calc($width_sp + 1px)) and (max-width: calc($width_tab * 1px)) {
    @content;
  }
}

@mixin textLink_arrow {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    width: calc(100% - 100px);
    height: 10px;
    background-image: url(../img/common/textLink_arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    left: get_vw(-5, 1536);
    bottom: 5px;
    @include media-sp {
      width: 100%;
      left: 0;
      bottom: -2px;
    }
  }
}

//fade in up
.fade {
  opacity: 0;
  visibility: hidden;
  transform: translate(0, 20px);
  transition: 0.5s all ease-in;
  &.active {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0);
  }
}

_font_scss

// Serif jp (Noto Serif Base)
$SerifJP: "Noto Serif JP", serif;

// SanSerif jp (Noto Sans Base)
$SanSerifJP: "Noto Sans JP", sans-serif;

// Serif en (Cinzel Base)
$SerifEN: "Cinzel", serif;

$SanSerifEN: "Raleway", sans-serif;

// font mixins
@mixin cinzel {
  font-family: $SerifEN;
  font-weight: 400;
}

@mixin raleway_regular {
  font-family: $SanSerifEN;
  font-weight: 400;
}

@mixin raleway_semibold {
  font-family: $SanSerifEN;
  font-weight: 600;
}

@mixin SerifJP_light {
  font-family: $SerifJP;
  font-weight: 300;
}

@mixin SerifJP_regular {
  font-family: $SerifJP;
  font-weight: 400;
}

@mixin SerifJP_medium {
  font-family: $SerifJP;
  font-weight: 500;
}

@mixin SerifJP_bold {
  font-family: $SerifJP;
  font-weight: 700;
}

@mixin SanSerifJP_light {
  font-family: $SanSerifJP;
  font-weight: 300;
}

@mixin SanSerifJP_regular {
  font-family: $SanSerifJP;
  font-weight: 400;
}

@mixin SanSerifJP_medium {
  font-family: $SanSerifJP;
  font-weight: 500;
}