想让 Sass mixin 更健壮（字体简写）

Question

仅供参考，无论如何我都不是 Sass 大师，我仍在学习。

我发现了 mixins 中参数的强大功能……现在我想一直使用它们 :)

说明

我一直在使用一种网络字体，它有 3 个系列：常规、bold 和 italic。所以我做了以下mixin：

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

我可以通过以下几种方式之一使用它：

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

我得到以下输出：

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;

到目前为止一切都很好，直到...

问题

我需要声明font-size 或line-height。如果我想这样做，我更喜欢使用字体速记样式，而不是单独声明所有属性。

因此，如果我想在字体中添加 font-size 和 line-height，我会使用纯 CSS：

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

问题是，使用上面的 mixin，我无法使用速记。

问题

如何将这种字体混合制成更强大的东西，可以类似于这些想法中的任何一个使用（这些想法只是一个假设，它们显然不起作用）：

1. @include ffArsenal(); [将使用默认值]
2. @include ffArsenal(1.1rem);
3. @include ffArsenal(1.1rem,1.8);
4. @include ffArsenal(1.8);

输出将是：

1. font: 1.6rem arsenal-regular, Arial, "Helvetica Neue", Helvetica, sans-serif; [默认值]
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;

目标

当然，这种情况下使用的是特定字体，但其想法是，该 mixin 可以与任何其他字体系列一起使用，以轻松声明字体速记样式，只需最少输入并最大化“DRY”。

在此先感谢您提供任何帮助。

Answer 1

除非你想跳过一大堆 圈，否则你不会使用 mixins 得到你想要的东西（另外，使用起来会很丑）。绝对最简单的方法是使用一个函数（它还有一个额外的好处，就是看起来更像自然的 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);
}

输出：

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