This will output the following CSS:
If you made it here, it means you either discovered something missing or
want to explore why Gaudiamus dubs itself a framework-builder.
Gaudiamus uses mixins and function under the hood that are fully exposed to you.
These tools are fully custom and can be used to design your utilities as you wish.
The file you want to import is located in at /scss/components/operations.scss
/* style.scss */
@use "../node_modules/gaudiamus-css/scss/components/operations" as ops;
/* ... depending on your need the regular gaudiamus imports & definitions */
$font-families:("arial":"Arial, sans-serif","times":"Times New Roman, serif");
@include ops.mapToClassUnquote("font", $font-families, "font-family", false, ("hover","visited"));
This will output the following CSS:
.font-arial, .visited\:font-arial:visited, .hover\:font-arial:hover {
font-family: Arial, sans-serif;
}
.font-times, .visited\:font-times:visited, .hover\:font-times:hover {
font-family: Times New Roman, serif;
}
Making the following utility classes available:
font-arial, visited:font-arial, hover:font-arial, font-times, visited: font-times, hover: font-times
The following introduction offers examples that might seem constructed. The real potential is derived from being able to combine mixins and functions accordingly in combination with native SASS functionality. In case you are unfamiliar with deeper SASS, feel free to copy & paste examples and start by adding to maps, changing variables etc.
This will output the following CSS: