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