使用可选参数创建 sass mixin

问题描述

我正在尝试为文本样式创建 scss mixin，其中包括颜色、字体大小、字体粗细、行高和字体系列。这就是我所做的 -

$color-gray-6: #777777;
$font-serif: 'Barlow',sans-serif;
$font-sans: 'Playfair display',serif;


    @mixin font-style(
        $colour: $color-gray-6,$size: 1.6,$weight: 400,$line: $size * 1.5,$family: serif
    ) {
        @if $size {
            font-size: ($size * 1) + px;
            font-size: ($size / 10) + rem;
        }
        @if $line == 1 {
            line-height: 1;
        } @else {
            line-height: ($line * 1) + px;
            line-height: ($line / 10) + rem;
        }
        @if $colour {
            color: $colour;
        }
        @if $weight {
            font-weight: $weight;
        }
        @if $family == serif {
            font-family: $font-serif;
        } @else {
            font-family: $font-sans;
        }
    }

我将混合用作 - @include font-style(#000000,14,400,sans)

问题 - 当我没有通过行高时出现此错误 - 未定义操作“sans * 1。我认为当行高不存在时，它将字体系列视为第 4 个参数。

问题 - 有没有办法让第 4 个参数可选，或者如果有更好的方法，请提出建议。

解决方法

第四个参数或您的 font-style() mixin 是 $line。当您传入 sans 作为参数时，您并没有跳过它。取而代之的是，您将第五个参数变成了第四个参数。

您可以采取的最佳方法是使用“关键字参数”：https://sass-lang.com/documentation/at-rules/mixin#keyword-arguments

本质上，您需要告诉 mixin 它是您提供的参数。

示例：

@include font-style(#000,14,400,$family: sans);