如何覆盖媒体查询中的变量？

Question

我有一个带标题和段落的div。我已经使用变量设置了字体。

因此，我尝试在媒体查询中为变量赋予新值。字体似乎保持不变。

$fs-xs: 13px;
$fs-s: 16px;
$fs-m: 18px;
$fs-l: 20px;
$fs-xl: 22px;
h1 {
  text-align: center;
  font-size: $fs-xl;
}

p {
  font-size: $fs-xs;
}

.container {
  width: 500px;
  margin: 0 auto;
}

@media (min-width: 480px) {
  $fs-xs: 20px;
  $fs-xl: 36px;
}

<div class="container">
  <h1>TITLE</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora alias mollitia animi esse officiis velit nam, unde maxime impedit reiciendis sint exercitationem hic voluptatum accusamus veniam molestias dicta quos saepe.</p>
</div>

因为我先要移动设备，所以我希望字体大小在某个断点处增大。

我该如何实现？