Want to make Sass mixin more robust (font shorthand)

Question

FYI, I'm not a Sass guru by any means, I'm still learning.

I have discovered the power of arguments in mixins... and now I want to use them all the time :)

Description

I've been using a web font, it has 3 families: regular, bold and italic. So I made the following mixin:

@mixin ffArsenal($style:regular) { font-family:arsenal-+$style, Arial, "Helvetica Neue", Helvetica, sans-serif; }

I can use it in one of several ways:

1. @include ffArsenal();
2. @include ffArsenal(bold);
3. @include ffArsenal(italic);

And I get the following outputs:

1. font-family: arsenal-regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
2. font-family: arsenal-bold, Arial, "Helvetica Neue", Helvetica, sans-serif;
3. font-family: arsenal-italic, Arial, "Helvetica Neue", Helvetica, sans-serif;

So far everything is good, until...

Problem

I need to declare font-size or line-height. If I want to do this, I prefer to use the font shorthand style rather than declaring all the properties separately.

So if I want to add a font-size and line-height to the font, in plain CSS I would do:

font: 1.6rem/1.1 arsenal-regular, Arial, "Helvetica Neue", Helvetica, sans-serif;

The thing is that with the above mixin, I'm unable to use the shorthand.

Question

How can this font mixin be made into something more robust that could be used similar to any of these ideas (these ideas are just a hypothesis, they obviously don't work):

1. @include ffArsenal(); [would use the default values]
2. @include ffArsenal(1.1rem);
3. @include ffArsenal(1.1rem,1.8);
4. @include ffArsenal(1.8);

And the outputs would be:

1. font: 1.6rem arsenal-regular, Arial, "Helvetica Neue", Helvetica, sans-serif; [default values]
2. font: 1.1rem arsenal-regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
3. font: 1.1rem/1.8 arsenal-regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
4. font: 1.6rem/1.8 arsenal-regular, Arial, "Helvetica Neue", Helvetica, sans-serif;

Objective

Of course this case is using a particular typeface but the idea is that this mixin could be used with any other font family to easily declare a font shorthand style with minimal typing and maximizing "DRY".

Thanks in advance for any help on this.

Answer 1

You're not going to get what you want using mixins unless you want to jump through a lot of hoops (plus, it will be ugly to use). The absolute simplest way is to use a function (which has an added bonus of looking more like natural CSS):

@function arsenal($type: regular) {
    @return arsenal-#{$type}, Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.foo {
    font-family: arsenal();
    font: 1.1rem arsenal();
    font: 1.1rem/1.8 arsenal();
    font: 1.1rem arsenal(bold);
}

Output:

.foo {
  font-family: arsenal-regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
  font: 1.1rem arsenal-regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
  font: 1.1rem/1.8 arsenal-regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
  font: 1.1rem arsenal-bold, Arial, "Helvetica Neue", Helvetica, sans-serif;
}