在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％，我只是用这样的混入：

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