在 Sass mixin 中处理可选参数 [重复]

Question

我刚刚开始使用 Sass，所以请耐心等待。

我有这个 mixin 来处理在 px（对于旧 IE）和 rem 对于现代浏览器中声明字体大小，它还可以很好地进行 line-height 计算。

@mixin font-size($font-size, $line-height-val: "", $sledge-hammer: "" /* $sledge-hammer is    for an optional `!important` keyword */) {
    font-size: ($font-size)+px#{$sledge-hammer};
    font-size: ($font-size / $base-font-size)+rem#{$sledge-hammer};
    @if $line-height-val == "" {
          line-height: ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
    } @else {
          line-height: #{$line-height-val};
    }
}

它可以工作，但我觉得可选参数（$line-height-val 和$sledge-hammer）并不是最好的方法。 $line-height-val 是必需的，因为有时我需要手动声明 line-height 和 $sledge-hammer 因为我需要在我的一些辅助类上声明 !important 关键字。

90% 的时间我只是像这样使用 mixin：

@include font-size(24);

也编译：

font-size: 24px;
font-size: 1.5rem;
line-height: 1.1;

当我需要覆盖 line-height 时，我会这样做：

@include font-size(24, 1.6);

也编译：

font-size: 24px;
font-size: 1.5rem;
line-height: 1.6;

但如果我需要声明 !important 关键字，那么我必须这样做：

@include font-size($font-size-sml, "", !important);

也编译：

font-size: 15px!important;
font-size: 0.9375rem!important;
line-height: 1.6;

但是感觉很有趣，我必须使用空的"" 作为第二个参数，而第三个参数的值将始终是!important，所以它应该在 mixin 中？

我只是想知道是否有更简洁的方式来编写这个 mixin？

Answer 1

你可以像这样调用参数时指定参数：

@include font-size($font-size-sml, $sledgehammer: !important);

你可以像这样缩短 mixin 参数：

@mixin font-size($font-size, $line-height-val: "", $i: false /* flag for`!important` */) {
    $important: if($i, "!important", "");
    font-size: ($font-size)+px #{$important};
    font-size: ($font-size / $base-font-size)+rem #{$important};
    @if $line-height-val == "" {
          line-height: ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
    } @else {
          line-height: #{$line-height-val};
    }
}