Generated by SassMeister.com.

input.scss

/// @group fonts
///

/* Font family variations
    ************************* */

$font-family-swiss: Swiss-721;
$font-swiss: $font-family-swiss;
$font-swiss-condensed: SwissCondensed;
$font-marriotticons: MarriottIcons;
$font-brandLogoIcons: BrandLogoIcons;
/*Brand icons with "by Marriott". These brand Icons are used in uni nav brand portfolio card, search results, brand filters,favs page*/
$font-portfolioLogoIcons: PortfolioLogoIcons;
/*These font icons are ONLY used in the brand ribbon.*/
$font-family-videoicons: VideoIcons;

/* Font size variations
    *********************** */

$font-xs: 12px;
$font-s: 14px;
$font-m: 16px;
$font-l: 18px;
$font-xl: 20px;
$font-xxl: 22px;
$font-xxxl: 24px;
$font-1x: 34px;
$font-2x: 36px;
$font-3x: 60px;
$font-4x: 90px;

/* Line Height palette
    **************** */

$line-height-xs: 16px;
$line-height-s: 18px;
$line-height-m: 20px;
$line-height-l: 22px;
$line-height-xl: 24px;
$line-height-xxl: 26px;
$line-height-xxxl: 38px;
$line-height-1x: 44px;
$line-height-2x: 64px;

/* Font weight variations
    ************************* */
$font-weight-regular: 500;
$font-weight-medium: 700;
$font-weight-bold: 900;

@function str-replace($string, $search, $replace: "") {
    $index: str-index($string, $search);

    @if $index {
        @return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }

    @return $string;
}

@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
    $src: null;

    $extmods: (eot: "?",
        svg: "#"+ str-replace($name, " ", "_"));

    $formats: (otf: "opentype",
        ttf: "truetype"
        );

    @each $ext in $exts {
        $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
        $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
        $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
    }

    @font-face {
        font-family: quote($name);
        font-style: $style;
        font-weight: $weight;
        src: $src;
    }
}

$html-font-size: 16px;

@function stripUnit($value) {
    @return $value / ($value * 0+1);
}

@function toRem($pxValue) {
    @return #{stripUnit($pxValue) / stripUnit($html-font-size)}rem;
}

@mixin screen($size, $type: max, $pixels: $breakpoint-small) {
    @if $size=='small' {
        @media screen and ($type+-width: $breakpoint-small) {
            @content;
        }
    }

    @else if $size=='med-small' {
        @media screen and ($type+-width: $breakpoint-med-small) {
            @content;
        }
    }

    @else if $size=='med' {
        @media screen and ($type+-width: $breakpoint-med) {
            @content;
        }
    }

    @else if $size=='large' {
        @media screen and ($type+-width: $breakpoint-med) {
            @content;
        }
    }

    @else if $size=='custom' {
        @media screen and ($type+-width: $pixels + px) {
            @content;
        }
    }

    @else {
        @content;
    }
}

@mixin font-attributes($style,
$variant,
$weight,
$size,
$line-height,
$family) {
    font: $style $variant $weight #{$size}/#{$line-height} $family;
}

/// @group Colors
/// Standard Palette
/// Base
$base-10: #1c1c1c;
$base-20: #ffffff;

/// Accent
$accent-10: #ff9662;
$accent-20: #b84c16;

/// Neutral
$neutral-10: #f8f8f8;
$neutral-20: #eeeeee;
$neutral-30: #c4c4c4;
$neutral-40: #707070;
$neutral-50: #303030;
$neutral-00: #000000;

/// Alerts
$alert-10: #d0021b;
$alert-20: #ffffff;
$alert-30: #d0021b;
$alert-40: #b94600;
$alert-50: #477d00;
$alert-60: #0565ae;

/// Merchandise
$merch-10: #ff9662;
$merch-20: #477d00;
$merch-30: #1c1c1c;
$merch-40: #fbc02d;
$merch-50: #ffffff;
$merch-60: #ffb995;

/// Loyalty Palette solid
$member-solid: #ff9662;
$member-solidAlt: #f8f8f8;
$silver-solid: #707488;
$gold-solid: #8c6f49;
$platinum-solid: #5e5f61;
$titanium-solid: #554749;
$ambassador-solid: #231c19;

$typography:("title":("s":("font-family":$font-swiss,
"font-size":$font-1x,
"line-height":$line-height-xxxl,
"font-weight":$font-weight-medium,
"color":$base-10,
"inverse-color":$base-20),
"m":("font-family":$font-swiss,
"font-size":$font-2x,
"line-height":$line-height-1x,
"font-weight":$font-weight-medium,
"color":$base-10,
"inverse-color":$base-20),
"l":("font-family":$font-swiss,
"font-size":$font-3x,
"line-height":$line-height-2x,
" font-weight":$font-weight-medium,
"color":$base-10,
"inverse-color":$base-20)));

// https://gist.github.com/HugoGiraudel/9933331
// map-fetch($map, $keys)
//
// An easy way to fetch a deep value in a multi-level map. Works much like
// map-get() except that you pass multiple keys as the second parameter to
// go down multiple levels in the nested map.
@function map-fetch($map, $keys) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }
  @return $map;
}


@each $type,
$sizes in $typography {
    .t-#{$type} {
        
        font-size: toRem(map-fetch($typography, "title" "s" "font-size"));
        
        // font-size: map-get(map-get(map-get($typography, "title"), "s"), "font-size");

        @each $size,
        $attrList in $sizes {
            &-#{$size} {
                @include font-attributes(normal,
                normal,
                 map-fetch($attrList, "font-weight"),
                 toRem(map-fetch($attrList, "font-size")),
                 toRem(map-fetch($attrList, "line-height")),
                 map-fetch($attrList, "font-family"));

            }
        }

        @each $size,
        $attrList in $sizes {
            &-inverse-#{$size} {
                color:  map-fetch($attrList, "inverse-color");
            }
        }

    }

}

output.css

/* Font family variations
    ************************* */
/*Brand icons with "by Marriott". These brand Icons are used in uni nav brand portfolio card, search results, brand filters,favs page*/
/*These font icons are ONLY used in the brand ribbon.*/
/* Font size variations
    *********************** */
/* Line Height palette
    **************** */
/* Font weight variations
    ************************* */
.t-title {
  font-size: 2.125rem;
}
.t-title-s {
  font: normal normal 700 2.125rem/2.375rem Swiss-721;
}
.t-title-m {
  font: normal normal 700 2.25rem/2.75rem Swiss-721;
}
.t-title-l {
  font: normal normal 3.75rem/4rem Swiss-721;
}
.t-title-inverse-s {
  color: #ffffff;
}
.t-title-inverse-m {
  color: #ffffff;
}
.t-title-inverse-l {
  color: #ffffff;
}

settings.json

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