// Augments a breakpoint map by building a "scale" property // containing the specified sizes to each breakpoint. @function ss-build-typography($opts: ()) { // Extend default opts $opts: map-merge(( "scales": ( "default": ( "base-font-size": 16px, "base-line-height": 1.5, "max-font-size": 28px, "max-line-height": 1.35 ), "tablet": ( "media-query": "screen and (min-width: 768px)", "base-font-size": 18px, "base-line-height": 1.6, "max-font-size": 42px, "max-line-height": 1.25 ) ), "numb-smaller-sizes": 1, "numb-larger-sizes": 4 ), $opts); // The object we'll return. $typography: (); // Create a scale for each breakpoint. @each $font-scale-name, $font-scale-opts in map-get($opts, "scales") { // Merge global opts with scale-specific opts $font-scale-opts: map-merge($font-scale-opts, ( "numb-smaller-sizes": map-get($opts, "numb-smaller-sizes"), "numb-larger-sizes": map-get($opts, "numb-larger-sizes") )); // Create a font scale. $font-scale: ss-build-font-scale($font-scale-opts); $typography: map-merge($typography, ($font-scale-name: $font-scale)); } @return $typography; }