使用媒体查询和 scss 时如何更改变量值

Question

我的网站中有相同的字体大小变量。 当我在 scss 中使用媒体查询时，我想更改此变量的值...我该怎么做... 以下方式不存在...

@media screen and (min-width:1000px){
 $font-sm:      13px;
 $font-default: 15px;
 $font-md:      18px;
}
@media screen and (max-width:999px){
 $font-sm:      10px;
 $font-default: 12px;
 $font-md:      14px;
}

Answer 1

改用自定义属性。

@media screen and (min-width: 400px) {
  :root {
    --font-sm: 13px;
    --font-default: 15px;
    --font-md: 18px;
  }
}

@media screen and (max-width: 800px) {
  :root {
    --font-sm: 10px;
    --font-default: 12px;
    --font-md: 14px;
  }
}

body {
  font-size: var(--font-default);
}