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);
}


// TODO: larger header


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

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



$style-list: (
  heading: $heading,
  body: $body,
);

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

@function findItemInLists($lists, $arg){
    @each $list in $lists {
         @if type-of($list) == list {
             @if index($list, $arg) != null {
               @return $list;
            }
         }
    }
     @error 'There is no #{$arg} in #{$lists}';
}

@mixin add-list-gen($data){
    @include list-gen(
      $base-font-family,
      nth($data, 2),
      nth($data, 3),
      nth($data, 4),
      nth($data, 5),
      nth($data, 6),
      nth($data, 7),
      nth($data, 8)
    );
}

@mixin get-style($list, $style, $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) {
      @if(map-get($type, mobile) != null){
            // $data: nth(map-get($type, mobile), $style);
            $data: findItemInLists(map-get($type, mobile), $style);
            @include add-list-gen($data);
            @include breakpoint(tablet) {
            //   $data: nth(map-get($type, desktop), $style);
                $data: findItemInLists(map-get($type, desktop), $style);
                @include add-list-gen($data);
            }
      }
      @else {
            $data: findItemInLists(map-get($type, default), $style);
            @include add-list-gen($data);
      }
  }
  /* a specific breakpoint has been specified, so only render that breakpoint. */
  @else {
    // $data: nth(map-get($type, $breakpoint), $style);
    $data: findItemInLists(map-get($type, $breakpoint), $style);
    @include add-list-gen($data);
  }
}

/**
  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, 1)},
      .#{nth($style, 1)},
      #{'%' + nth($style, 1)} {
        @include add-list-gen($style);
      }
    } @else {
      @include breakpoint(tablet) {
        #{nth($style, 1)},
        .#{nth($style, 1)},
        #{'%' + nth($style, 1)} {
            @include add-list-gen($style);
        }
      }
    }
  }
}

/**
  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 add-list-gen($style);
    }
  }
}

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


// Tests
.test-1 {
  @extend %h1;
}
.test-2 {
  @include get-style(heading, h1, mobile);
  // This will add only mobile style
}
.test-3 {
  @include get-style(heading, h2);
  // This will add both mobile and desktop styles
}
.test-4 {
  @include get-style(heading, h3, desktop);
  // This will add only desktop style
}
.test-5 {
  @include get-style(body, paragraph);
  // This will add the default style
}
.test-6 {
  @include get-style(body, smaller-paragraph);
}
.test-7 {
  @include get-style(body, descriptor);
}
.test-8 {
  @include get-style(body, tooltip);
}
.test-9 {
  @include get-style(body, pull-quote);
}
.test-10 {
  @include get-style(body, eyebrow);
}

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,
.h1,
.test-1 {
  font-family: "din-2014", Arial, sans-serif;
  font-size: 26px;
  font-weight: 800;
  font-style: normal;
  line-height: 1.23;
  letter-spacing: 0.15px;
  text-transform: capitalize;
  color: #181918;
}

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

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

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

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

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

@media (min-width: 768px) {
  h1,
.h1,
.test-1 {
    font-family: "din-2014", Arial, sans-serif;
    font-size: 36px;
    font-weight: 800;
    font-style: normal;
    line-height: 1.11;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    color: #181918;
  }
}
@media (min-width: 768px) {
  h2,
.h2 {
    font-family: "din-2014", Arial, sans-serif;
    font-size: 26px;
    font-weight: 800;
    font-style: normal;
    line-height: 1.23;
    letter-spacing: 0.15px;
    text-transform: capitalize;
    color: #181918;
  }
}
@media (min-width: 768px) {
  h3,
.h3 {
    font-family: "din-2014", Arial, sans-serif;
    font-size: 21px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.19;
    letter-spacing: -0.25px;
    text-transform: capitalize;
    color: #181918;
  }
}
@media (min-width: 768px) {
  h4,
.h4 {
    font-family: "din-2014", Arial, sans-serif;
    font-size: 21px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.19;
    letter-spacing: -0.25px;
    text-transform: capitalize;
    color: #181918;
  }
}
@media (min-width: 768px) {
  h5,
.h5 {
    font-family: "din-2014", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.29;
    letter-spacing: 0px;
    text-transform: capitalize;
    color: #181918;
  }
}
@media (min-width: 768px) {
  h6,
.h6 {
    font-family: "din-2014", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    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'.
*/
.paragraph {
  font-family: "din-2014", Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.25px;
  text-transform: none;
  color: #181918;
}

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

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

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

.pull-quote {
  font-family: "din-2014", Arial, sans-serif;
  font-size: 28px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.14;
  letter-spacing: -0.25px;
  text-transform: none;
  color: #656565;
}

.eyebrow {
  font-family: "din-2014", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #181918;
}

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;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.25px;
  text-transform: none;
  color: #181918;
}

.test-2 {
  /* 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: 26px;
  font-weight: 800;
  font-style: normal;
  line-height: 1.23;
  letter-spacing: 0.15px;
  text-transform: capitalize;
  color: #181918;
}

.test-3 {
  /* 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: 21px;
  font-weight: 800;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: -0.25px;
  text-transform: capitalize;
  color: #181918;
}
@media (min-width: 768px) {
  .test-3 {
    font-family: "din-2014", Arial, sans-serif;
    font-size: 26px;
    font-weight: 800;
    font-style: normal;
    line-height: 1.23;
    letter-spacing: 0.15px;
    text-transform: capitalize;
    color: #181918;
  }
}

.test-4 {
  /* 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: 21px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: -0.25px;
  text-transform: capitalize;
  color: #181918;
}

.test-5 {
  /* 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;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.25px;
  text-transform: none;
  color: #181918;
}

.test-6 {
  /* 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: 15px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: -0.25px;
  text-transform: none;
  color: #181918;
}

.test-7 {
  /* 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: 500;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: -0.25px;
  text-transform: none;
  color: #181918;
}

.test-8 {
  /* 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: 12px;
  font-weight: 600;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: -0.25px;
  text-transform: none;
  color: #181918;
}

.test-9 {
  /* 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;
  font-style: italic;
  line-height: 1.14;
  letter-spacing: -0.25px;
  text-transform: none;
  color: #656565;
}

.test-10 {
  /* 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;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #181918;
}

settings.json

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