Handling optional arguments in a Sass mixin

Question

I'm just getting started with Sass so bear with me.

I have this mixin to handle declaring font sizes in both px (for old IE) and rem for modern browsers, it also does a nice line-height calculation.

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

It works but I feel like the optional arguments ($line-height-val and $sledge-hammer) is not the most optimal way of doing it. $line-height-val is needed as sometimes I need to manually declare the line-height and $sledge-hammer is needed because I need to declare the !important keyword on some of my helper classes.

90% of the time I just use the mixin like this:

@include font-size(24);

Which compiles too:

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

When I need to override the line-height I do this:

@include font-size(24, 1.6);

Which compiles too:

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

But if I need to declare the !important keyword then I have to do this:

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

Which compiles too:

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

But feels funny I have to use empty "" for the 2nd argument, and the value for the 3rd argument will always be !important so that should be in the mixin?

I just wonder if there's a much cleaner way of writing this mixin?

cimmanon · Accepted Answer · 2013-01-09T02:43:20.500

1

You can specify the parameters when you call them like this:

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

You could shorten the mixin arguments like this:

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

edited Jan 09 '13 at 02:43

answered Jan 08 '13 at 13:07

cimmanon

67,211
17
165
171

But I can just write `!important` which is less verbose, but really the value is always `!important` so that should be in the mixin but I can't seem to get it working. Also if I call the mixin like your example above I get an error because it's expecting something for the 2nd argument: `$line-height-val` hence the empty double quotes which like I've said feels funny. – Chris Pearce Jan 09 '13 at 02:22
The error was because I wrote `$sledgehammer` instead of `$sledge-hammer`. It compiles fine otherwise. – cimmanon Jan 09 '13 at 02:42
Thanks that works, can you explain what this part is doing mainly the last empty double quotes: `$important: if($i, "!important", "");` – Chris Pearce Jan 21 '13 at 06:10
`If` is a standard Sass function: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#if-instance_method. It's like a ternary operator if you're familiar with other languages. – cimmanon Jan 21 '13 at 12:51

Handling optional arguments in a Sass mixin

1 Answers1