Skip to content

Instantly share code, notes, and snippets.



Last active Jun 12, 2019
What would you like to do?
A mixin that applies typographic styles from a map
// A mixin that allows to apply typographic styles from a map
// Supports applying a typographic style responsively, based on a map of media queries in a $breakpoints variable
@mixin u-set-typography($typeface-name: 'body', $style-name: 'regular') {
$this-typeface: map-get($font-styles, $typeface-name);
$this-style: map-get($this-typeface, $style-name);
@if $typeface-name == 'body' {
font-family: $font-body;
@each $property, $value in $this-style {
$is-breakpoint: variable-exists('breakpoints') and map-has-key($breakpoints, $property) and type-of($value) == 'map';
@include u-set-breakpoint(if($is-breakpoint, $property, null)) {
@if $is-breakpoint {
@each $subproperty, $subvalue in $value {
#{$subproperty}: $subvalue;
} @else {
#{$property}: $value;
@mixin u-set-breakpoint($breakpoint: null) {
@if ($breakpoint and variable-exists('breakpoints') and map-has-key($breakpoints, $breakpoint)) {
// if we use something like sass-mq we can replace this with package-specific mixin
@media (min-width: map-get($breakpoints, $breakpoint)) {
} @else {
// A map containing the typography styles for a project
// 2nd level of the map (body-font) corresponds to the main typefaces.
// 3rd level of the map corresponds to a typography style which is a group of font properties that frequently go together. Any arbitrary word goes as a group name. The properties are usually font-size and line-height but can be also any other.
// 4th level of the map may be a media query name if there is a $breakpoints map variable containing min-width based media queries.
// Usage: @include u-set-typography($typeface, $style-name);
// E.g.: @include u-set-typography('body-font', 'paragraph-text');
$typographic-styles: (
body-font: ( // eg. Open Sans
paragraph-text: (
font-size: 16px,
line-height: 1.5,
medium: (
font-size: 18px,
line-height: 1.4
text-banner-heading: (
font-size: 42px,
line-height: 1.2,
font-weight: bold
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.