Generated by SassMeister.com.

input.scss

// This is the default html and body font-size for the base rem value.
$rem-base: 16px !default;

$base-font-family: 'din-2014', Arial, sans-serif;
$fallback-font-family: Arial, sans-serif;


$heading: (
/* name element font-size weight line-height letter-spacing text-transform */
  mobile: (
    heading-01 h1 26px 800 1.23 0.15px capitalize,
    heading-02 h2 21px 800 1.19 -0.25px capitalize,
    heading-03 h3 18px 700 1.33 -0.25px capitalize,
    heading-04 h4 21px 400 1.19 -0.25px capitalize,
    heading-05 h5 14px 700 1.29 0px capitalize,
    heading-06 h6 14px 700 1.29 0px uppercase
  ),
  desktop: (
    heading-01 h1 36px 800 1.11 0.5px capitalize,
    heading-02 h2 26px 800 1.23 0.15px capitalize,
    heading-03 h3 21px 700 1.19 -0.25px capitalize,
    heading-04 h4 21px 400 1.19 -0.25px capitalize,
    heading-05 h5 14px 700 1.29 0px capitalize,
    heading-06 h6 14px 700 1.29 0px uppercase
  )
);


$paragraph: (
/*  name  element font-size weight  line-height color */
  default: (
    body-01 null 16px 400 1.625 color(gray, 03),
    body-02 null 14px 400 1.714 color(gray, 03),
    body-03 null 12px 600 1.5 color(gray, 03)
  )
);


$eyebrow: (
/* name element font-size weight line-height letter-spacing text-transform color */
eyebrow-01 null 14px 700 1.29 2px uppercase
);

$style-list: (
  heading: $heading,
  paragraph: $paragraph,
  eyebrow: $eyebrow
);

$breakpoints: (
  'mobile': 576px,
  'tablet': 768px,
  'desktop': 1024px,
  'wide': 1440px
) !default;

// min-width breakpoints
@mixin breakpoint($breakpoint) {
  // If the key exists in the map
  @if map-has-key($breakpoints, $breakpoint) {
    // Prints a media query based on the value
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  }

  // If the key doesn't exist in the map
  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
            + "Available breakpoints are: #{map-keys($breakpoints)}.";
  }
}

@mixin list-gen($font, $size, $weight, $line-height, $letter-spacing, $text-transform) {
  font-family: $font;
  font-size: $size;
  font-weight: $weight;
  line-height: $line-height;
  letter-spacing: $letter-spacing;
  text-transform: $text-transform;
}

@mixin get-style($list, $style: 01, $breakpoint: null) {
  $type: map-get($style-list, $list);
  @if ($type == null) {
    @error 'There is no $variable in $style-list with the name #{$list}';
  }
  $bp: map-get($type, $breakpoint);
  /* There are no map of values in the list ($list} at the key of ($breakpoint), so we want to render both mobile and desktop. */
  @if ($bp == null) {
    $data: nth(map-get($type, mobile), $style);
    @include list-gen(
      $base-font-family,
      nth($data, 3),
      nth($data, 4),
      nth($data, 5),
      nth($data, 6),
      nth($data, 7)
    );
    @include breakpoint(tablet) {
      $data: nth(map-get($type, desktop), $style);
      @include list-gen(
        $base-font-family,
        nth($data, 3),
        nth($data, 4),
        nth($data, 5),
        nth($data, 6),
        nth($data, 7)
      );
    }
  }
  /* a specific breakpoint has been specified, so only render that breakpoint. */
  @else {
    $data: nth(map-get($type, $breakpoint), $style);
    @include list-gen(
      $base-font-family,
      nth($data, 3),
      nth($data, 4),
      nth($data, 5),
      nth($data, 6),
      nth($data, 7)
    );
  }
}

/**
  This generates the h1-h6 styling based on the $heading variable in '_settings.typography.scss'.
*/
@each $list, $breakpoint in $heading {
  @each $style in $breakpoint {
    @if (nth($list, 1) != 'desktop') {
      #{nth($style, 2)},
      .#{nth($style, 1)},
      #{'%' + nth($style, 1)} {
        @include list-gen(
          $base-font-family,
          nth($style, 3),
          nth($style, 4),
          nth($style, 5),
          nth($style, 6),
          nth($style, 7) 
        );
      }
    } @else {
      @include breakpoint(tablet) {
        #{nth($style, 2)},
        .#{nth($style, 1)},
        #{'%' + nth($style, 1)} {
          @include list-gen(
            $base-font-family,
            nth($style, 3),
            nth($style, 4),
            nth($style, 5),
            nth($style, 6),
            nth($style, 7)
          );
        }
      }
    }
  }
}

output.css

/**
  This generates the h1-h6 styling based on the $heading variable in '_settings.typography.scss'.
*/
h1,
.heading-01 {
  font-family: "din-2014", Arial, sans-serif;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.23;
  letter-spacing: 0.15px;
  text-transform: capitalize;
}

h2,
.heading-02 {
  font-family: "din-2014", Arial, sans-serif;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.19;
  letter-spacing: -0.25px;
  text-transform: capitalize;
}

h3,
.heading-03 {
  font-family: "din-2014", Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.33;
  letter-spacing: -0.25px;
  text-transform: capitalize;
}

h4,
.heading-04 {
  font-family: "din-2014", Arial, sans-serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.19;
  letter-spacing: -0.25px;
  text-transform: capitalize;
}

h5,
.heading-05 {
  font-family: "din-2014", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.29;
  letter-spacing: 0px;
  text-transform: capitalize;
}

h6,
.heading-06 {
  font-family: "din-2014", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.29;
  letter-spacing: 0px;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  h1,
.heading-01 {
    font-family: "din-2014", Arial, sans-serif;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.11;
    letter-spacing: 0.5px;
    text-transform: capitalize;
  }
}
@media (min-width: 768px) {
  h2,
.heading-02 {
    font-family: "din-2014", Arial, sans-serif;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.23;
    letter-spacing: 0.15px;
    text-transform: capitalize;
  }
}
@media (min-width: 768px) {
  h3,
.heading-03 {
    font-family: "din-2014", Arial, sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.19;
    letter-spacing: -0.25px;
    text-transform: capitalize;
  }
}
@media (min-width: 768px) {
  h4,
.heading-04 {
    font-family: "din-2014", Arial, sans-serif;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.19;
    letter-spacing: -0.25px;
    text-transform: capitalize;
  }
}
@media (min-width: 768px) {
  h5,
.heading-05 {
    font-family: "din-2014", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.29;
    letter-spacing: 0px;
    text-transform: capitalize;
  }
}
@media (min-width: 768px) {
  h6,
.heading-06 {
    font-family: "din-2014", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.29;
    letter-spacing: 0px;
    text-transform: uppercase;
  }
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}