1

我刚刚开始使用 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-heightand$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？

4

1 回答 1

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};
    }
}
于 2013-01-08T13:07:53.383 回答