如何在媒体查询中使用SASS变量进行字体大小调整？

Question

简而言之，我正在尝试创建一些SASS变量来存储我网站的各种字体大小，并使这些大小随媒体查询动态变化。

例如，我想要一个'大'字体大小，默认为60px，但如果最大宽度为1000px则更改为40px。

这是我希望输出的CSS：

h1 {
  font-size: 60px;
}

@media (max-width: 1000px) {
    h1 {
        font-size: 40px;
    }
}

这是最初的SASS（没有达到这个目的）：

$fontLarge:         60;

@media only screen and (max-width: 1000px) {
    $fontLarge:     40;
}

h3 {
    font-size: $fontLarge;
}

上述SASS仅输出：

h3 {
  font-size: 40;
}

我明白为什么，因为我实际上只宣告了H3一次，没有媒体查询。希望你能看到我想要实现的目标，以及为什么。为了添加更多细节，我也将断点大小声明为变量。任何人都可以解释实现这一切的最佳方法（它是可能的），还是描述我应该如何解决这个问题？

PS我刚刚开始工作，但感觉非常干涩。

@mixin bp($breakpoint) {
    $breakpointLarge:       "(max-width: 1000px)";
    $breakpointSmall:        "(max-width: 600px)";
    @if $breakpoint == breakpointLarge {
        @media #{$breakpointLarge} { @content; }
    }
    @else if $point == breakpointSmall {
        @media #{$breakpointSmall} { @content; }
    }   
}

@mixin bpFontSize($bp, $sizeType) {
    // Default
    $fontLarge:         60;
    $fontMedium:        24;
    @if $sizeType == title {
        @include fontSize($fontLarge);
    }
    @if $sizeType == subtitle {
        @include fontSize($fontMedium);
    }

    // breakpointLarge  
    @if $bp == breakpointLarge {
        $fontLarge:         40;
        $fontMedium:        18;     
        @if $sizeType == title {
            @include fontSize($fontLarge);
        }
        @if $sizeType == subtitle {
            @include fontSize($fontMedium);
        }
    }

    // breakpointSmall
    @if $bp == breakpointSmall {
        $fontLarge:         20;
        $fontMedium:        12;
        @if $sizeType == title {
            @include fontSize($fontLarge);
        }
        @if $sizeType == subtitle {
            @include fontSize($fontMedium);
        }
    }

}

@mixin fontSize($fontSizePx) {
    font-size: $fontSizePx + px;
    font-size: ($fontSizePx/10) + rem;
}