在 SCSS 中循环两级嵌套列表以创建动态 @font-face

费兰·比雷乌

我有一个类似的列表：

$fonts: (
  primary: (
    extra-light: (
      family:'Literata',
      weight: 200,
      style: normal,
      display: swap,
      src: url('/assets/fonts/Literata-Regular.woff2'),
    ),
    light: (
      family: 'Literata',
      weight: 300,
      style: normal,
      display: swap,
      src: url('/assets/fonts/Literata-Regular.woff2'),
    ),
    regular: (
      family: 'Literata',
      weight: 400,
      style: normal,
      display: swap,
      src: url('/assets/fonts/Literata-Regular.woff2'),
    ),
    bold: (
      family: 'Literata',
      weight: 700,
      style: normal,
      display: swap,
      src: url('/assets/fonts/Literata-Regular.woff2'),
    ),
  ),
  secondary: (
    light: (
      family: 'Zilla Slab',
      weight: 300,
      style: normal,
      display: swap,
      src: url('/assets/fonts/Zilla-Slab-Regular.woff2'),
    ),
    regular: (
      family: 'Zilla Slab',
      weight: 400,
      style: normal,
      display: swap,
      src: url('/assets/fonts/Zilla-Slab-Regular.woff2'),
    ),
    bold: (
      family: 'Zilla Slab',
      weight: 700,
      style: normal,
      display: swap,
      src: url('/assets/fonts/Zilla-Slab-Bold.woff2'),
    ),
),
  tertiary: (
    regular: (
      family: 'Montserrat',
      weight: 400,
      style: normal,
      display: swap,
      src: url('/assets/fonts/Montserrat-Regular.woff2'),
    ),
  ),
);

我的目标是遍历每种字体类型（primary,secondary和tertiary），然后遍历每种类型的每种变体（extra-light, light, regular, bold）。

我想@font-face根据每个字体数据构建一个动态属性。

我尝试过这样的事情但没有成功：

@each $font-types in $fonts {
  $properties: family weight style src;

  @each $property, $values in $font-types {
    @if contains($properties, $property) {
      @font-face {
        @if $property != 'src' {
          font-#{$property}: map-get($font-properties, $property);
        } @else{
          src: map-get($font-properties, $property) format('woff2');
        }
      }
    }
  }
}

作为记录：contains是一个辅助函数：

@function contains($list, $values...) {
  @each $value in $values {
    @if type-of(index($list, $value)) != 'number' {
      @return false;
    }
  }

  @return true;
}

费兰·比雷乌

对于那些可能会有所帮助的人：我最终使用了以下方法：

@each $font-type, $font-variants in $fonts {
  @each $properties, $font-variant in $font-variants {
    @font-face {
      @each $property, $value in $font-variant {
        @if $property != 'src' {
          font-#{$property}: $value;
        } @else {
          #{$property}: $value format('woff2');
        }
      }
    }
  }
}

它输出以下内容：