@each 与 @include 混合

Question

我有一个包含 30 种字体的下拉菜单，我希望下拉菜单的字体也显示 Google 字体（当然是为了视觉表现！）示例文本。

我有 HTML 和 ID，例如：font-oswald-light、font-oswald-reg、font-oswald-bold.

使用@each 指令，我想做这样的事情：

@each $font-name, $font-mixin in (lato, Lato-Light),
                                  (open_sans, Open_Sans-Light),
                                  (oswald, Oswald-Light),
                                  (raleway, Raleway-Light),
                                  (roboto, Roboto-Light),
                                  (source_sans_pro, Source_Sans_Pro-Light),
                                  (ubuntu, Ubuntu-Light) {
  #font-#{$font-name}-light {
    @include #{$font-mixin};
  }
}

创建字体系列：

@import url('https://fonts.googleapis.com/css?family=......)

@mixin Lato-Light {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-style: normal;
}

@mixin Lato-Reg {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-style: normal;
}

@mixin Lato-Bold {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-style: normal;
}

但是，@each 不喜欢@include 里面显示font-family。我没有使用任何库（bourbon、compass 等）来创建 font-face()。

我的问题是：有什么方法可以动态创建 @each font-ID 列表，以便在尝试 @include 系列时不会出错？

Answer 1

#font-#{$font-name}-light {
  @include #{$font-mixin};
}

首先，这段代码行不通。在 Sass 中，插值法不以这种方式工作。 Sass 期望 标识符 在 @include 关键字之后，当它遇到这段代码时，它评估 $font-mixin 到变量表示的值，仅此而已，一个 value。 Sass 不会将 value 解释为 identifier

其次，您不需要为每一种字体都创建一个 mixin。这种方法不灵活，更难维护。

我建议使用一个 mixin 循环通过 fonts map 动态生成你想要的 css。

$fonts-list:(
  lato-light: ("Lato", sans-serif) 300 normal,
  lato-reg: ("Lato", sans-serif) 400 normal,
  lato-bold: ("Lato", sans-serif) 700 normal,
  oswald-light: ("Oswald", sans-serif) 200 normal,
  oswald-reg: ("Oswald", sans-serif) 400 normal
);


@mixin fonts($family, $weight, $style) {
  font-family: $family;
  font-weight: $weight;
  font-style: $style;
}

@each $font, $attributes in $fonts-list {
  #font-#{$font} {
    @include fonts(nth($attributes, 1), nth($attributes, 2), nth($attributes, 3));
  }
}

编译后的CSS是这样的

#font-lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

#font-lato-reg {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

#font-lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

#font-oswald-light {
  font-family: "Oswald", sans-serif;
  font-weight: 200;
  font-style: normal;
}

#font-oswald-reg {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-style: normal;
}

您可以决定使用多个 字体映射 来存储基于变体的字体，即 $fonts-light，它存储所有字体的，$fonts-reg，存储所有常规变体 的字体......然后你可以用同样的方式遍历每一个。这完全取决于您喜欢的结构。希望对您有所帮助

@each 与 @include 混合

@each with an @include mixin

css

fonts

sass

google-webfonts