使用可选参数创建 sass 混入

Question

我正在尝试为文本样式创建 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个参数可选，或者有更好的办法请指教。

Answer 1

第四个参数或您的 font-style() mixin 是 $line。当您传入 sans 作为参数时，您并没有跳过它。相反，您采用了应该是第五个参数的内容并将其变为第四个。

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

基本上你需要告诉mixin你提供的是哪个参数。

示例：

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

使用可选参数创建 sass 混入

Creating a sass mixin with optional arguments

sass

less

scss-mixins