Generated by SassMeister.com.

input.scss

$breakpoints: (
  mobile: 599px,
  stablet: 767px,
  tablet: 1023px,
  desktop: 1279px,
  wide: 1600px
);
@mixin breakpoint($breakpoint, $min: false) {
  @if $min and map-has-key($breakpointsMin, $breakpoint) {
    @media (min-width: map-get($breakpointsMin, $breakpoint)) {
      @content;
    }
  } @else if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @warn 'Unfortunately, no value could be retrieved from `#{$breakpoint}`. '
        +'Available breakpoints are: #{map-keys($breakpoints)}.';
  }
}
@function map-deep-get($map, $keys...) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }
  @return $map;
}
@function font-weight($weight: regular) {
  @return map-get($font-weight, $weight);
}

$font-weight: (
  xlight: 100,
  mlight: 200,
  light: 300,
  regular: 400,
  bold: 700
);
$font-size: (
  mobile: (
    xl: 32px,
    h1: 28px,
    h2: 24px,
    p: 16px
  ),
  tablet: (
    xl: 46px,
    h1: 36px,
    h2: 28px,
    p: 16px
  ),
  desktop: (
    xl: 64px,
    h1: 46px,
    h2: 38px,
    p: 18px,
    util: 14px
  )
);

$font: (
  mobile: (
    xl: (
      font-size: map-deep-get($font-size, mobile, xl),
      font-weight: map-get($font-weight, xlight),
      line-height: 38px
    ),
    h1: (
      font-size: map-deep-get($font-size, mobile, h1),
      font-weight: map-get($font-weight, xlight),
      line-height: 34px
    ),
    p: (
      font-size: map-deep-get($font-size, mobile, p),
      font-weight: map-get($font-weight, xlight),
      line-height: 34px
    ),
  ),
  tablet: (
    xl: (
      font-size: map-deep-get($font-size, tablet, xl),
      font-weight: map-get($font-weight, xlight),
      line-height: 56px
    ),
    h1: (
      font-size: map-deep-get($font-size, tablet, h1),
      font-weight: map-get($font-weight, xlight),
      line-height: 44px
    ),
    p: (
      font-size: map-deep-get($font-size, mobile, p),
      font-weight: map-get($font-weight, xlight),
      line-height: 34px
    )
  ),
  desktop: (
    xl: (
      font-size: map-deep-get($font-size, desktop, xl),
      font-weight: map-get($font-weight, xlight),
      line-height: 76px
    ),
    h1: (
      font-size: map-deep-get($font-size, desktop, h1),
      font-weight: map-get($font-weight, xlight),
      line-height: 56px
    ),
    p: (
      font-size: map-deep-get($font-size, mobile, p),
      font-weight: map-get($font-weight, xlight),
      line-height: 34px
    )
  )
);

@mixin font($size: p) {
  $font-props-mobile: map-deep-get($font, mobile, $size);
  @each $prop, $val in $font-props-mobile {
    #{$prop}: #{$val};
  }
  @include breakpoint(tablet) {
    $font-props-tablet: map-deep-get($font, tablet, $size);
    @each $prop, $val in $font-props-tablet {
      #{$prop}: #{$val};
    }
  }
  @include breakpoint(desktop) {
    $font-props-desktop: map-deep-get($font, desktop, $size);
    @each $prop, $val in $font-props-desktop {
      #{$prop}: #{$val};
    }
  }
}

%body {
    @include font(p);
}

%h1 {
    @include font(h1)
}

body, p {
    @extend %body;
}

.componentB {
    @extend %body;
    p {
      @extend %body;  
    }
}

h1, .h1 {
    @extend %h1;
}

output.css

.componentB p, .componentB, body, p {
  font-size: 16px;
  font-weight: 100;
  line-height: 34px;
}
@media (min-width: 1023px) {
  .componentB p, .componentB, body, p {
    font-size: 16px;
    font-weight: 100;
    line-height: 34px;
  }
}
@media (min-width: 1279px) {
  .componentB p, .componentB, body, p {
    font-size: 16px;
    font-weight: 100;
    line-height: 34px;
  }
}

h1, .h1 {
  font-size: 28px;
  font-weight: 100;
  line-height: 34px;
}
@media (min-width: 1023px) {
  h1, .h1 {
    font-size: 36px;
    font-weight: 100;
    line-height: 44px;
  }
}
@media (min-width: 1279px) {
  h1, .h1 {
    font-size: 46px;
    font-weight: 100;
    line-height: 56px;
  }
}

settings.json

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