Generator Mixin

The generator mixin in Fontsource is a powerful tool that allows for advanced use cases in Sass. It provides a way to dynamically generate CSS based on the specified properties. Please note that the generator mixin is more advanced and is recommended for users who require fine-grained control over their font styles. For most use cases, the Faces mixin is sufficient.

Import

To use the generator mixin, you need to import the Fontsource mixin module along with the sass:map module to extract generator properties. Here’s an example of how to import the generator mixin for the Open Sans font:

@use "sass:map";
@use "@fontsource/open-sans/scss/mixins" as OpenSans;

Usage

The generator mixin allows you to generate CSS based on the provided properties. It uses a loop to iterate over the properties and generate CSS from the content block. Here’s an example of using the generator mixin:

@include OpenSans.generator(
  $weights: (
    400,
    800,
  )
) using ($props) {
  /* CSS generated dynamically based on the properties */
  @font-face {
    font-family: "Random stuff #{map.get($props, font-family)}";
    font-style: normal;
    font-weight: map.get($props, font-weight);
    src: map.get($props, src);
  }
}

In this example, the OpenSans.generator mixin is called with the desired properties, and the content block is used to generate CSS dynamically based on those properties.

Arguments

The generator mixin accepts the same arguments as the faces mixin. You can refer to the arguments section of the faces mixin documentation for a complete list of available arguments.

Properties

The generator mixin provides several properties that can be accessed within the content block. These properties are passed into the content block and can be used to generate dynamic CSS. Here are the properties available:

Mixin Arguments

All the arguments passed into the generator mixin are resolved to their final values and passed into the content block. These values are constant throughout each content block iteration. You can refer to the arguments section of the faces mixin documentation for a complete list of available arguments.

@include generator(
    $weights: (
      400,
      800,
    )
  ) using ($props) {
  /* #{map.get($props, weights)} will resolve to: Hello 400, 800 */
  /* #{map.get($props, family)} will default to: Open Sans */
}

Loop Parameters

These variables change on each iteration of the content block:

CSS Properties

These are the CSS properties that are calculated and used by default in the faces mixin:

Example

Here’s an example of how the faces mixin uses the generator mixin for its implementation:

@include generator(
    // Faces mixin arguments are passed down to the generator
    $metadata: $metadata,
    $directory: $directory,
    $family: $family,
    $display: $display,
    $formats: $formats,
    $subsets: $subsets,
    $weights: $weights,
    $styles: $styles,
    $axes: $axes
  ) using ($props) {
  /* #{map.get($props, variant)} */
  @font-face {
    font-family: map.get($props, font-family);
    font-style: map.get($props, font-style);
    font-display: map.get($props, font-display);
    font-weight: map.get($props, font-weight);
    font-stretch: map.get($props, font-stretch);
    unicode-range: map.get($props, unicode-range);
    src: map.get($props, src);
  }
}

In this example, the faces mixin passes its arguments to the generator mixin, and the content block generates CSS based on the properties.