Css 你能在@media查询中重新定义@mixin吗？

我在我的SCS中定义了以下@mixin以创建像素和rems的字体大小：

@mixin font-size($sizeValue: 1){
font-size: ($sizeValue * 10) + px;
font-size: $sizeValue + rem;
}

然后我有以下几点：

h1 { @include font-size(1.6) }

h2 { @include font-size(1.4) }

h3 { @include font-size(1.2) }

但是，当屏幕低于480px时，我想将字体大小减少80%，但到目前为止，以下代码不起作用：

@media(max-width:480px){ 
@mixin font-size($sizeValue: 1){
font-size: (($sizeValue * 10) * 0.8) + px;
font-size: ($sizeValue * 0.8) + rem;
}} 

---

是否可以在@media查询中重新定义@mixin？这样做的最佳方式是什么？我想这样做，而不必再次包含h1、h2、h3规则。

在mixin中添加一个附加参数：

@mixin font-size($sizeValue: 1, $ratio: 1){
  font-size: (($sizeValue * 10) * $ratio) + px;
  font-size: ($sizeValue * $ratio) + rem;
}

然后，将标题值另存为变量：

$header-1: 1.6;
$header-2: 1.4;
$header-3: 1.2;

最后：

h1 {
  @include font-size($header-1);
}

@media(max-width:480px) {
  h1 {
    @include font-size($header-1, .8);
  }
}

这将产生：

h1 {
  font-size: 16px;
  font-size: 1.6rem;
}

@media (max-width: 480px) {
  h1 {
    font-size: 12.8px;
    font-size: 1.28rem;
  }
}

---

如果您不想重新定义所有的头，解决方案是更改mixin以包含媒体查询

@mixin font-size($sizeValue: 1){
    font-size: ($sizeValue * 10) + px;
    font-size: $sizeValue + rem;

    @media(max-width:480px) {
        font-size: (($sizeValue * 10) * 0.8) + px;
        font-size: ($sizeValue * 0.8) + rem;
   }
}

但是请记住，css输出是这样的，每个头都会重复@media规则

h1 {
    font-size: 16px;
    font-size: 1.6rem;
}
@media (max-width: 480px) {
    h1 {
        font-size: 12.8px;
        font-size: 1.28rem; 
    }
}
h2 {
    font-size: 14px;
    font-size: 1.4rem;
}
@media (max-width: 480px) {
    h2 {
        font-size: 11.2px;
        font-size: 1.12rem;
    }
}
h3 {
    font-size: 12px;
    font-size: 1.2rem; 
}
@media (max-width: 480px) {
    h3 {
        font-size: 9.6px;
        font-size: 0.96rem;
    }
}

---

谢谢你的回答，但这不起作用。至少对我来说，这条规则没有被编译成CSS。对不起，我修正了我的答案，并根据你对问题的编辑对其进行了更改。谢谢你的答案确实有效，但我的目的是找到一种不必在@media中重新定义所有标题的方法。我认为有一种方法可以只将比率值传递到现有的@mixin中一次，因为字体大小保持不变。mixin只是一块文本，它可以

@包含
，然后重复（如复制和粘贴）在多个地方，如果你在
@media
中重新定义一个mixin，它就不会“知道”你包含它的任何其他时间。如果你使用rem，为什么不为不同的媒体查询更改主体上的
字体大小
。如果字体稍微大一点，浏览器只支持px的用户将存活下来。