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添加一个额外的参数：

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

你可以在@media查询中重新定义@mixin吗？

2 个答案: