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.
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:
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:
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.
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.
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:
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.
These variables change on each iteration of the content block:
These are the CSS properties that are calculated and used by default in the faces mixin:
url(./files/open-sans-cyrillic-800-italic.woff2) format('woff2'), url(./files/open-sans-cyrillic-800-italic.woff) format('woff')
Here’s an example of how the faces mixin uses the generator mixin for its implementation:
In this example, the faces mixin passes its arguments to the generator mixin, and the content block generates CSS based on the properties.