SCSS @mixin多变量使用报错：缺少$h1-weight参数

我在7-1架构的项目中，尝试在_typography.scss文件中使用Sass的@mixin和@include。

单参数正常运行的代码 #

当@mixin只有一个参数时，代码在VS Code Live Server中可以正常运行：

@mixin font-prop($h1-size) {
    font-size: $h1-size;
}

$h1-size-desktop: 3.83rem;
$h1-size-tablet: 3.00rem;
$h1-size-mobile: 2.5rem;

$h2-size-desktop: 2.83rem;
$h2-size-tablet: 2.00rem;
$h2-size-mobile: 2.00rem;

@media (max-width: 600px) {
    h1 {
        @include font-prop($h1-size-mobile);
    }
    h2 {
        @include font-prop($h2-size-mobile);
    }
}

@media (min-width: 601px){
    h1 {
        @include font-prop($h1-size-tablet);
    }
    h2 {
        @include font-prop($h2-size-tablet);
    }
}

@media (min-width: 1101px) {
    h1 {
        @include font-prop($h1-size-desktop);
    }
    h2 {
        @include font-prop($h2-size-desktop);
    }
}

添加第二个参数后的问题 #

当给@mixin font-prop添加第二个参数$h1-weight后，样式完全不更新，甚至第一个参数的效果也失效，直接传入第二个参数值也没用：

@mixin font-prop($h1-size, $h1-weight) {
    font-size: $h1-size;
    font-weight: $h1-weight;
}

$h1-weight-mobile: 300;

$h1-size-desktop: 3.83rem;
$h1-size-tablet: 3.00rem;
$h1-size-mobile: 2.5rem;

$h2-size-desktop: 2.83rem;
$h2-size-tablet: 2.00rem;
$h2-size-mobile: 2.00rem;

@media (max-width: 600px) {
    h1 {
        @include font-prop($h1-size-mobile, 300);
    }
    h2 {
        @include font-prop($h2-size-mobile);
    }
}

@media (min-width: 601px){
    h1 {
        @include font-prop($h1-size-tablet);
    }
    h2 {
        @include font-prop($h2-size-tablet);
    }
}

@media (min-width: 1101px) {
    h1 {
        @include font-prop($h1-size-desktop);
    }
    h2 {
        @include font-prop($h2-size-desktop);
    }
}

测试发现只要@mixin包含2个及以上参数就会出问题，回退到单参数就恢复正常。

编译错误提示（翻译后） #

编译错误
错误：缺少参数 $h1-weight。
╷
3 │ @mixin font-prop($h1-size, $h1-weight) {
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 声明位置
... │
23 │ @include font-prop($h2-size-mobile);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 调用位置

解决方法 #

方法1：给第二个参数设置默认值 #

修改@mixin的定义，给$h1-weight设置默认值，这样调用时可以选择只传第一个参数：

@mixin font-prop($h1-size, $h1-weight: normal) {
    font-size: $h1-size;
    font-weight: $h1-weight;
}

默认值可以根据需求设置，比如400、bold等。

方法2：确保所有调用都传入两个参数 #

检查所有@include font-prop的地方，补全第二个参数，比如h2的调用：

// 以移动端h2为例，根据实际需求设置权重
@include font-prop($h2-size-mobile, 400);

原因说明 #

Sass要求调用@mixin时，必须传入声明时定义的所有参数，除非参数有默认值。你的代码中，h2的所有@include都只传了一个参数，导致编译失败，最终生成的CSS文件有问题，所以样式完全失效。

内容的提问来源于stack exchange，提问作者huckleberry2021