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中？

我只是想知道是否有更清晰的方式来编写这个混音？

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

处理Sass mixin中的可选参数

1 个答案: