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) }

但是当屏幕低于 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 规则。

Answer 1

为你的混入添加一个额外的参数:

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

然后，将 header 值保存为变量:

$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;
  }
}