Generated by SassMeister.com.

input.scss

// TYPE MAPS
$type-families: (
  'body': (
    "'proxima-nova', sans-serif"
  ),
  'heading': (
    "'museo-slab', serif"
  )
);

$type-scale-ratio: 1.125;
$type-scales: (
	'sm': (
		1: 10px,
		2: 12px,
		3: 14px
	),
	'md': (
		1: 16px,
		2: 18px,
		3: 20px
	),
	'lg': (
		1: 22px,
		2: 24px,
		3: 32px
	),
	'xl': (
		1: 48px,
		2: 60px,
		3: 72px
	)
);

$type-styles: (
    normal: normal,
    emphasis: italic
);

$type-weights: (
    regular: 400,
    medium: 500,
    semibold: 600,
    bold: 700
);

$type-spacings: (
    normal: 0,
    lg: 0.25,
    xl: 0.5
);

$type-lineheights: (
    normal: 1.5,
    sm: 1.2
);

$type-transforms: (
    no: none,
    cp: capitalize,
    lw: lowercase,
    up: uppercase
);



// MAIN CSS VARIABLES
:root {
    // FONT FAMILIES GENERATOR
    @each $category, $value in $type-families {
        --type-stack-#{$category}: #{$value};
    }
    
    // FONT SIZE GENERATOR
    @each $scalecategory, $scalelevels in $type-scales {
        @each $scalelevel, $scalevalue in $scalelevels {
            --type-scale-#{$scalecategory}-#{$scalelevel}: #{$scalevalue};
        }
    }
    
    // FONT STYLE GENERATOR
    @each $category, $value in $type-styles {
        --type-style-#{$category}: #{$value};
    }
    
    // FONT WEIGHT GENERATOR
    @each $category, $value in $type-weights {
        --type-weight-#{$category}: #{$value};
    }
    
    // LETTER SPACING GENERATOR
    @each $category, $value in $type-spacings {
        --type-spacing-#{$category}: #{$value};
    }
    
    // LINE HEIGHT GENERATOR
    @each $category, $value in $type-lineheights {
        --type-lineheight-#{$category}: #{$value};
    }
    
    // TEXT TRANSFORM GENERATOR
    @each $category, $value in $type-transforms {
        --type-transform-#{$category}: #{$value};
    }
}



// MOBILE
@media screen and (max-width: 480px){
    // @include media-breakpoint-down(sm) { // Bootstrap
  :root {
    @each $scalecategory, $scalelevels in $type-scales {
      @each $scalelevel, $scalevalue in $scalelevels {
        @if $scalecategory == 'sm' {
          --type-scale-#{$scalecategory}-#{$scalelevel}: calc(#{$scalevalue}+2px);
        }@else {
        --type-scale-#{$scalecategory}-#{$scalelevel}: calc(#{$scalevalue}/#{$type-scale-ratio});
        }
      }
    }
    
    --type-weight-bold: --type-weight-semibold;
  }
}



// Mixins
@mixin typefamily($stack: 'body') {
    font-family: --type-stack-#{stack};
}

@mixin typeweight($weight: 'regular') {
    font-weight: --type-weight-#{$weight};
}

@mixin typescale($level: 'md', $scale: '1') {
  font-size: --type-scale-#{$level}-#{$scale};
}





div {
    @include typefamily;
    @include typeweight(bold);
    @include typescale(lg,3);
}

.ids--type-display-xl-3 {
    @include typefamily(heading);
    @include typescale(xl,3);
    @include typeweight(bold);
}

output.css

:root {
  --type-stack-body: 'proxima-nova', sans-serif;
  --type-stack-heading: 'museo-slab', serif;
  --type-scale-sm-1: 10px;
  --type-scale-sm-2: 12px;
  --type-scale-sm-3: 14px;
  --type-scale-md-1: 16px;
  --type-scale-md-2: 18px;
  --type-scale-md-3: 20px;
  --type-scale-lg-1: 22px;
  --type-scale-lg-2: 24px;
  --type-scale-lg-3: 32px;
  --type-scale-xl-1: 48px;
  --type-scale-xl-2: 60px;
  --type-scale-xl-3: 72px;
  --type-style-normal: normal;
  --type-style-emphasis: italic;
  --type-weight-regular: 400;
  --type-weight-medium: 500;
  --type-weight-semibold: 600;
  --type-weight-bold: 700;
  --type-spacing-normal: 0;
  --type-spacing-lg: 0.25;
  --type-spacing-xl: 0.5;
  --type-lineheight-normal: 1.5;
  --type-lineheight-sm: 1.2;
  --type-transform-no: none;
  --type-transform-cp: capitalize;
  --type-transform-lw: lowercase;
  --type-transform-up: uppercase;
}

@media screen and (max-width: 480px) {
  :root {
    --type-scale-sm-1: calc(10px+2px);
    --type-scale-sm-2: calc(12px+2px);
    --type-scale-sm-3: calc(14px+2px);
    --type-scale-md-1: calc(16px/1.125);
    --type-scale-md-2: calc(18px/1.125);
    --type-scale-md-3: calc(20px/1.125);
    --type-scale-lg-1: calc(22px/1.125);
    --type-scale-lg-2: calc(24px/1.125);
    --type-scale-lg-3: calc(32px/1.125);
    --type-scale-xl-1: calc(48px/1.125);
    --type-scale-xl-2: calc(60px/1.125);
    --type-scale-xl-3: calc(72px/1.125);
    --type-weight-bold: --type-weight-semibold;
  }
}
div {
  font-family: --type-stack-stack;
  font-weight: --type-weight-bold;
  font-size: --type-scale-lg-3;
}

.ids--type-display-xl-3 {
  font-family: --type-stack-stack;
  font-size: --type-scale-xl-3;
  font-weight: --type-weight-bold;
}

settings.json

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