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;

// --- Colors ---
$colors: (
  primary: (
    enterpriseGreen: #169a5a,
    black: #181918,
    white: #ffffff
  ),
  secondary: (
    orange: #ce810d,
    darkGreen: #006639,
    midGreen: #127f4a,
    calendarGreen: #6fc099,
    backgroundGray: #f3f3f3,
    lightGray: #c3c3c3,
    midGray: #656565,
    darkGray: #393a3b
  ),
  tertiary: (
    yellow: #f7d727,
    red: #e10300,
    blue: #a4ceff
  ),
  tiers: (
    gold-tier: #cfb67f,
    platinum-tier: #272727,
    silver-tier: #757575
  )
);


/**
 * @returns hex color value from colors defined in '_settings.colors.scss'
 */
@function color($color-group: primary, $color-name: enterpriseGreen) {
  $colors: map-get($colors, $color-group);
  @return map-get($colors, $color-name);
}

/**

  There are 4 ways the designed styles are generated, and can be used.

  1. Element level styles are automatically generated.

  2. Class based. But I prefer to not use these everywhere, they dirty up the structure.
  .heading-01 through .heading-06 are automatically generated based on the maps above and change based on breakpoint.

  3. Placeholder extensions. These combine all the places used and generate one rule.
  %heading-01 through %heading-06 are automatically generated and used with @extend. This includes all breakpoints.

  .test {
    @extend %heading-02;
  }

  4. A utility mixin can be used to specify styles more exactly but still use the mapping.

  .test-2 {
    @include get-style(heading, 06);

    or if you just want the mobile or desktop version of these styles:
    @include get-style(heading, 06, mobile);
    @include get-style(heading, 06, desktop);
  }

  .eyebrow {
    @include get-style(eyebrow, 01);
  }
*/

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

$body: (
  // name element font-size weight line-height letter-spacing text-transform color
    default:
    (
      body-01 null 18px 400 1.33 -0.25px none color(primary, black),
      // paragraph
        body-02 null 15px 400 1.33 -0.25px none color(primary, black),
      // smaller paragraph
        body-03 null 14px 500 1.29 -0.25px none color(primary, black),
      // descriptor
        body-04 null 12px 600 1.5 -0.25px none color(primary, black),
      // tooltip
        // body-05 null 28px 500 1.14 -0.25px none color(secondary, midGray), // quote
        //   body-06 null 14px 700 1.29 2px uppercase color(primary, black) // eyebrow
    )
);

// TODO: larger header

$quote: (
  // name element font-size weight line-height letter-spacing text-transform color
    default: (quote-01 null 28px 500 1.14 -0.25px capitalize color(secondary, midGray), null)
);

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


$style-list: (
  heading: $heading,
  body: $body,
  quote: $quote,
  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, $color) {
  font-family: $font;
  font-size: $size;
  font-weight: $weight;
  line-height: $line-height;
  letter-spacing: $letter-spacing;
  text-transform: $text-transform;
  color: $color;
}

@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),
      nth($data, 8)
    );
    @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),
        nth($data, 8)
      );
    }
  }
  /* 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),
      nth($data, 8)
    );
  }
}

/**
  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),
          nth($style, 8)
        );
      }
    } @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),
            nth($style, 8)
          );
        }
      }
    }
  }
}

/**
  This generates the body styling based on the $body variable in '_settings.typography.scss'.
*/
@each $list, $breakpoint in $body {
  @each $style in $breakpoint {
    .#{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),
        nth($style, 8)
      );
    }
  }
}

/**
  This generates the eyebrow styling.
  .test {
    @extend %eyebrow;
  }
*/
%eyebrow {
  @include get-style(eyebrow, 01, default);
}

.eyebrow {
  @extend %eyebrow;
}

/*
  This generates the quote styling.
  .test {
    @extend %quote;
  }
*/
%quote {
  @include get-style(quote, 01, default);
  font-style: italic;
}
.quote {
  @extend %quote;
}

p {
  @include get-style(body, 01, default);
}

output.css

/**
 * @returns hex color value from colors defined in '_settings.colors.scss'
 */
/**
  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;
  color: #181918;
}

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;
  color: #181918;
}

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;
  color: #181918;
}

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;
  color: #181918;
}

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;
  color: #181918;
}

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;
  color: #181918;
}

@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;
    color: #181918;
  }
}
@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;
    color: #181918;
  }
}
@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;
    color: #181918;
  }
}
@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;
    color: #181918;
  }
}
@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;
    color: #181918;
  }
}
@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;
    color: #181918;
  }
}
/**
  This generates the body styling based on the $body variable in '_settings.typography.scss'.
*/
.body-01 {
  font-family: "din-2014", Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.33;
  letter-spacing: -0.25px;
  text-transform: none;
  color: #181918;
}

.body-02 {
  font-family: "din-2014", Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.33;
  letter-spacing: -0.25px;
  text-transform: none;
  color: #181918;
}

.body-03 {
  font-family: "din-2014", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.29;
  letter-spacing: -0.25px;
  text-transform: none;
  color: #181918;
}

.body-04 {
  font-family: "din-2014", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.25px;
  text-transform: none;
  color: #181918;
}

/**
  This generates the eyebrow styling.
  .test {
    @extend %eyebrow;
  }
*/
.eyebrow {
  /* There are no map of values in the list ($list) at the key of ($breakpoint), so we want to render both mobile and desktop. */
  font-family: "din-2014", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.29;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #181918;
}

/*
  This generates the quote styling.
  .test {
    @extend %quote;
  }
*/
.quote {
  /* There are no map of values in the list ($list) at the key of ($breakpoint), so we want to render both mobile and desktop. */
  font-family: "din-2014", Arial, sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.25px;
  text-transform: capitalize;
  color: #656565;
  font-style: italic;
}

p {
  /* There are no map of values in the list ($list) at the key of ($breakpoint), so we want to render both mobile and desktop. */
  font-family: "din-2014", Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.33;
  letter-spacing: -0.25px;
  text-transform: none;
  color: #181918;
}

settings.json

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