Generated by SassMeister.com.
// ---- | |
// libsass (v3.2.5) | |
// ---- | |
$breakpoints: ( | |
small : 570px, | |
medium: 800px, | |
large : 1030px | |
); | |
$typography: ( // <-- config | |
body: ( // <-- category | |
'micro': ( // <-- size | |
null : (18px, 1.5), // <-- breakpoint: (group) | |
small : 19px, | |
medium : 20px, | |
large : 21px, | |
), | |
'mini': ( | |
null : (15px, 24px), | |
small : 16px, | |
medium: 17px, | |
large : 19px, | |
) | |
), | |
display: ( | |
'mega': ( | |
null : 18px, | |
small : 19px, | |
medium : 20px, | |
large : 21px, | |
1140px: 36px, | |
1280px: 38px | |
), | |
'giga': ( | |
null : (15px, 1.5), | |
small : 16px, | |
medium: 17px, | |
large : 19px, | |
) | |
) | |
) !default; | |
@function fetch-category-from-config($config, $category) { | |
@if ( map-has-key($config, $category) ) { | |
@return map-get($config, $category); | |
} @else { | |
@error "No category by the value of '#{$category}' exists in the typography config"; | |
} | |
} | |
@function fetch-group-from-category($category, $group) { | |
@if ( map-has-key($category, $group) ) { | |
@return map-get($category, $group); | |
} @else { | |
@error "No size by the name of '#{$group}' exists in the typography config"; | |
} | |
} | |
@function fetch-group-from-breakpoint($breakpoint, $group) { | |
@if ( map-has-key($group, $breakpoint) ) { | |
@return map-get($group, $breakpoint); | |
} @else { | |
@error "No breakpoint by the name of '#{$breakpoint}' exists in the typography config"; | |
} | |
}; | |
@function fetch-font-size-from-group($group, $breakpoint) { | |
$group: fetch-group-from-breakpoint($breakpoint, $group); | |
@if type-of($group) == "list" { | |
@return nth($group, 1); | |
} | |
@if type-of($group) == "number" { | |
@return $group; | |
} | |
@else { | |
@error "No breakpoint by the name of '#{$breakpoint}' exists in the typography config"; | |
} | |
} | |
@function fetch-line-height-from-group($group, $breakpoint) { | |
$group: fetch-group-from-breakpoint($breakpoint, $group); | |
@if type-of($group) == "list" { | |
@return nth($group, 2); | |
} | |
@else { | |
@error "Line height for the desired property does not exist at the '#{$breakpoint}' breakpoint"; | |
} | |
} | |
@function fs($size, $category, $breakpoint:null, $map:$typography) { | |
@if type-of($map) != map { | |
@error "The passed param #{$map} is not a map."; | |
} | |
$category: fetch-category-from-config($map, $category); | |
$group: fetch-group-from-category($category, $size); | |
$font-size: fetch-font-size-from-group($group, $breakpoint); | |
@return $font-size; | |
} | |
@function lh($size, $category, $breakpoint:null, $map:$typography) { | |
@if type-of($map) != map { | |
@error "The passed param #{$map} is not a map."; | |
} | |
$category: fetch-category-from-config($map, $category); | |
$group: fetch-group-from-category($category, $size); | |
$line-height: fetch-line-height-from-group($group, $breakpoint); | |
@return $line-height; | |
} | |
@mixin make-font-size($font-size) { | |
@if type-of($font-size) == "list" { | |
font-size: nth($font-size, 1); | |
@if (length($font-size) > 1) { | |
line-height: nth($font-size, 2); | |
} | |
} | |
@else { | |
font-size: $font-size; | |
} | |
} | |
@mixin make-responsive-markup($breakpoint, $values) { | |
@media screen and (min-width: $breakpoint) { | |
@include make-font-size($values); | |
} | |
} | |
@mixin set-font-scale($size, $category, $map:$typography) { | |
$category: fetch-category-from-config($map, $category); | |
$group: fetch-group-from-category($category, $size); | |
@each $breakpoint, $values in $group { | |
@if $breakpoint == null { // If no breakpoint use default value | |
@include make-font-size($values); | |
} | |
@if type-of($breakpoint) == "number" { // If breakpoint manually specified use that | |
@include make-responsive-markup($breakpoint, $values) | |
} | |
@if global-variable-exists(breakpoints) { | |
@if map-has-key($breakpoints, $breakpoint) { // If size exists in breakpoint map use that | |
$breakpoint: map-get($breakpoints, $breakpoint); | |
@include make-responsive-markup($breakpoint, $values); | |
} | |
} | |
} | |
} | |
body { | |
font-size: fs(micro, body, small); | |
line-height: lh(mini, body); | |
} | |
h1 { | |
font-size: fs(mega, display, 1140px); | |
} | |
h2 { | |
@include set-font-scale(mega, display); | |
} |
body { | |
font-size: 19px; | |
line-height: 24px; | |
} | |
h1 { | |
font-size: 36px; | |
} | |
h2 { | |
font-size: 18px; | |
} | |
@media screen and (min-width: 570px) { | |
h2 { | |
font-size: 19px; | |
} | |
} | |
@media screen and (min-width: 800px) { | |
h2 { | |
font-size: 20px; | |
} | |
} | |
@media screen and (min-width: 1030px) { | |
h2 { | |
font-size: 21px; | |
} | |
} | |
@media screen and (min-width: 1140px) { | |
h2 { | |
font-size: 36px; | |
} | |
} | |
@media screen and (min-width: 1280px) { | |
h2 { | |
font-size: 38px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment