css - 您可以在 @media 查询中重新定义 @mixin 吗？

Question

我在我的 SCSS 中定义了以下 @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) }

但是当屏幕低于 480 像素时，我想将字体大小减小 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 规则。

Answer 1

为你的 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;
  }
}

Answer 2

如果您不想重新定义所有标头，解决方案是更改 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;
    }
}