Question

仅供参考，我从来都不是Sass大师，我还在学习。

我在mixins中发现了参数的强大功能......现在我想一直使用它们：）

描述

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

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

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

@include ffArsenal();
@include ffArsenal(bold);
@include ffArsenal(italic);

我得到以下输出：

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

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

问题

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

因此，如果我想在字体中添加font-size和line-height，我会这样做：

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

事情是，使用上述mixin，我无法使用速记。

问题

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

@include ffArsenal(); [将使用默认值]
@include ffArsenal(1.1rem);
@include ffArsenal(1.1rem,1.8);
@include ffArsenal(1.8);

产出将是：

font: 1.6rem 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.6rem/1.8 arsenal-regular, Arial, "Helvetica Neue", Helvetica, sans-serif;

目标

当然这个案例使用的是特定的字体，但想法是这个mixin可以与任何其他字体系列一起使用，轻松地声明字体速记样式，最小化打字并最大化＆＃34; DRY＆＃34;。

提前感谢您提供任何帮助。

Answer 1

除非你想要跳过批次的箍，否则你不会得到你想要的东西（加上，使用它会很难看）。最简单的方法是使用一个函数（它看起来更像是自然的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;
}

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

1 个答案: